<p>It’s possible to do this by making the entire CSS file a Twig template.</p>

<p>Create a new file in your <code>templates</code> folder, such as <code>templates/css/styles.css</code>, with all the dynamic styles you want.</p>

<p>To prevent the browser from reloading the file on each request, make sure you set cache headers in the template.</p>

<pre><code>{# Tell the browser to cache this page for 30 days #}
{% set expiry = now|date_modify('+30 days') %}

{% header "Cache-Control: max-age=" ~ (expiry.timestamp - now.timestamp) %}
{% header "Pragma: cache" %}
{% header "Expires: " ~ expiry|date('D, d M Y H:i:s', 'GMT') ~ " GMT" %}
</code></pre>

<p>Then load the CSS file just like any other from your webpage templates.</p>

<pre class="lang-html prettyprint-override"><code>&lt;link rel="stylesheet" type="text/css" href="/css/styles.css"&gt;
</code></pre>

CC BY-SA 4.0
2020-03-08T15:31:11.577Z
Thats awesome thank you! I'm guessing you could adapt to possibly handle scss?
Chrisl2310
CC BY-SA 4.0
2020-03-08T17:15:29.057Z
@Chrisl2310 not natively but maybe possible with this plugin: https://plugins.craftcms.com/scss
Brandon Kelly
CC BY-SA 4.0
2020-03-08T10:50:36.587Z
2020-03-08T10:50:36.587Z
Brandon Kelly
<p>Is it possible to pass a value from Craft global setting into a CSS/SCSS file? So for example I want to be able to allow the end user to customise colours and fonts without having to include it inline.</p>

<p>Has anyone achieved this or similar? </p>

<p>Many thanks</p>

<templating><craft3><globals><css>
Use Craft globals for CSS styles
# Use Craft globals for CSS styles

(Asked by: username_0 on 2020-03-08)

Is it possible to pass a value from Craft global setting into a CSS/SCSS file? So for example I want to be able to allow the end user to customise colours and fonts without having to include it inline.

Has anyone achieved this or similar?

Many thanks

**Tags:** templating, craft3, globals, css

---

## 1 answers

### Answer by username_1 on 2020-03-08. Score: 3 | Accepted answer

It’s possible to do this by making the entire CSS file a Twig template.
Create a new file in your templates folder, such as templates/css/styles.css, with all the dynamic styles you want.
To prevent the browser from reloading the file on each request, make sure you set cache headers in the template.
{# Tell the browser to cache this page for 30 days #}
{% set expiry = now|date_modify('+30 days') %}

{% header "Cache-Control: max-age=" ~ (expiry.timestamp - now.timestamp) %}
{% header "Pragma: cache" %}
{% header "Expires: " ~ expiry|date('D, d M Y H:i:s', 'GMT') ~ " GMT" %}

Then load the CSS file just like any other from your webpage templates.

> **Comments:**
> **username_0**: Thats awesome thank you! I'm guessing you could adapt to possibly handle scss?  
> **username_1**: @Chrisl2310 not natively but maybe possible with this plugin: https://plugins.craftcms.com/scss  

---

