Dynamic Sass Variables

Question

Is there any way I can set my color variables depending on what class is on the html element? Or any other way to achieve this same goal?

html {

  &.sun         


        

Answer 1

Unfortunately, Sass/Scss files need to get compiled into Css files, in order to be supported in your web-browser.

Since Css files don't support variables, you can only set a variables value in the Scss template, because the Sass compiler will replace the var. (in every position, the var. has been used), with the given value.

That means, that it does not help to change the color of the variable, depending on what class is included in the Html file, because the Css file won't contain any variables.

The only way you could do such thing, is by:

1. reading the Html file to find out what class has been used,
2. than changing the Scss template variables to the right color value
3. and compiling the Scss template into an Css file