supptech's avatar

get SCSS Variable/Value from Database

Hey guys,

is there a way, to get a value, f.e. color code from database into my scss file? Thanks for help.

0 likes
3 replies
Snapey's avatar

Not really. Your SCSS file should be compiled to CSS before anyone visits your site, so you can't do it at runtime.

Better to use style tags and insert the value into the HTML with blade.

click's avatar

You can use css variables for this: https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_custom_properties

In your normal css:

:root {
  --your-theme-color: red;
}

h1 {
   color: var(--your-theme-color);
}

Somewhere in your <head> or you can do it with javascript:

<head>
 <!-- your regular css styles -->
  <style> 
       :root {
           --your-theme-color: {{ $yourValueFromTheDB }}
       }
   </style>
</head>

via JS. This can be useful if your settings are coming from an xhr call.

let yourVar = 'blue';
document.documentElement.style.setProperty('--your-theme-color', yourVar);
Muetze's avatar

You could also store the colors in a SCSS file parallel to the database or only in a SCSS file and parse it when reading.

But I think is the solution with the CSS variables by @click the most elegant.

Please or to participate in this conversation.