I would like to use front matter variables within css to eliminate the use of inline styling in the html files, and was wondering if this is possible?
Here's an example of what I have at the moment

Page front matter:

```
---
section-1-color: #222222
---

```

HTML:

```
<section class="section-1" style="background-color: {% page.section-1-color %}">

```

What I would prefer to do in CSS:

```
.section-1 {
    background-color: {% page.section-color %};
}

```

Is this possible? or is inline styling the most acceptable method?