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 {

  &.sunrise {
    $accent: #37CCBD;
    $base: #3E4653;
    $flat: #eceef1;
  }

  &.moonlight {
    $accent: #18c;
    $base: #2a2a2a;
    $flat: #f0f0f0;
  }

}

Answer 1

This is basic theming. You would either want to use a mixin or include to do multiple themes in a single CSS file. This is how you would go about it using includes:

_theme.scss

section.accent {
    background: $accent;
}

.foo {
    border: $base;
}

.bar {
    color: $flat;
}

main.scss

html {
  &.sunrise {
    $accent: #37CCBD;
    $base: #3E4653;
    $flat: #eceef1;

    @import "theme";
  }

  &.moonlight {
    $accent: #18c;
    $base: #2a2a2a;
    $flat: #f0f0f0;

    @import "theme";
 }
}

You could just as easily make a mixin that takes 3 colors as its arguments to use in place of the include:

@mixin theme($accent, $base, $flat) {
    // .. do stuff ..
}

Answer 2

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