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

If you like to use JavaScript, you can do this:

You will need an HTML element with an Id and a Class (the one that will decides, what color to use).

...

Next, you will need to add some JavaSript

var CurrentColor = document.getElementById("Target").className; 

if (CurrentColor == "sunrise") {
  document.exampleTagg.style.exampleProperty = "#37CCBD";
}
else if (CurrentColor == "moonlight") {
  document.exampleTagg.style.exampleProperty = "#18c";
}

(the first line will declare a variable, that contains the value of our exampleTagg element (the one with the "Target" id), then the if statement will find out the name of our class (sunrise or moonlight) and last, we will change the background of our exampleTagg to the color we like to)

To use this example for your own purposes, replace the exampleTagg with some real tagg and change the exampleProperty to an valid Css property.

Notice, that you will not need Scss for this job (u can still use it), because JavaScript will access your compiled Css file.