Answers.Body: <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>
  
Answers.ContentLicense: CC BY-SA 4.0
Answers.CreationDate: 2020-03-08T15:31:11.577Z
Answers.Text: Thats awesome thank you! I'm guessing you could adapt to possibly handle scss?
Answers.UserDisplayName: Chrisl2310
Answers.ContentLicense: CC BY-SA 4.0
Answers.CreationDate: 2020-03-08T17:15:29.057Z
Answers.Text: @Chrisl2310 not natively but maybe possible with this plugin: https://plugins.craftcms.com/scss
Answers.UserDisplayName: Brandon Kelly
Answers.ContentLicense: CC BY-SA 4.0
Answers.CreationDate: 2020-03-08T10:50:36.587Z
Answers.LastActivityDate: 2020-03-08T10:50:36.587Z
Answers.UserDisplayName: Brandon Kelly
Body: <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>
  
Tags: <templating><craft3><globals><css>
Title: Use Craft globals for CSS styles
ThreadText: # 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.
  
  ```html
  <link rel="stylesheet" type="text/css" href="/css/styles.css">
  
  ```
  
  > **Comments:**
  > **username_0**: Thats awesome thank you! I'm guessing you could adapt to possibly handle scss?  
  > **username_1**: @username_0 not natively but maybe possible with this plugin: https://plugins.craftcms.com/scss  
  
  ---
  
  