Set a variable in Sass depending on the selector

Question

I’ve got a website that’s using a few different ‘main’ colors. The general HTML layout stays the same, only the colors change depending on the content.

I was wondering if I could set a color variable depending on the CSS selector. This way I can theme my website with a few variables and let Sass fill in the colors.

For example:

$color-1: #444; $color-2: #555; $color-3: #666; $color-4: #777;  body.class-1 {   color-default: $color-1;   color-main: $color-2; } body.class-2 {   color-default: $color-3;   color-main: $color-4; }  /* content CSS */ .content {   background: $color-default;   color: $color-main; } 

I was thinking of using a mixin for this, but I was wondering if there’s a better way to do this—with a function maybe? I’m not that great with Sass, so any help would be appreciated.

Answer 1

I think a mixin is the answer. (As I wrote, variables won’t work.)

@mixin content($color-default, $color-main) {   background: $color-default;   color: $color-main; }  body.class-1 {   @include content(#444, #555); }  body.class-2 {   @include content(#666, #777); } 

That SCSS compiles to this CSS:

body.class-1 {   background: #444444;   color: #555555; }  body.class-2 {   background: #666666;   color: #777777; } 

If you wanted to group the color values together in your SCSS file, you could use variables in conjunction with the mixin:

$color-1: #444; $color-2: #555; $color-3: #666; $color-4: #777;  body.class-1 {   @include content($color-1, $color-2); }  body.class-2 {   @include content($color-3, $color-4); } 

Answer 2

as sass documentation explain nicely (https://sass-lang.com/documentation/variables):

• Sass variables are all compiled away by Sass. CSS variables are included in the CSS output.

• CSS variables can have different values for different elements, but Sass variables only have one value at a time.

• Sass variables are imperative, which means if you use a variable and then change its value, the earlier use will stay the same. CSS variables are declarative, which means if you change the value, it’ll affect both earlier uses and later uses.

We may take advantage of that using a combination of sass and css variables to achieve what you want:

//theme colors $red-cosmo: #e01019; $green-cosmo: #00c398; $primary-color: var(--primary-color); body{   --primary-color: #{$red-cosmo}; } body.univers-ride{   --primary-color: #{$green-cosmo}; } 

So when I call my sass variable $primary-color, it will print as my css variable "var(--primary-color)" that will expand as $green-cosmo only if my body has the "univers-ride" class else it will be $red-cosmo the default color.