Jrn Jrn - 4 months ago 22
CSS Question

SASS set variable depending on CSS class

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 a CSS-class. 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 if anyone could help me out. Appreciated.

Thanks.

Answer

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);
}