SASS set variable depending on CSS class -

i've got website that's using few different 'main' colors. general html layout stays same, colors change depending on content.

i wondering if set color variable depending on css-class. way can theme website few variables , let sass fill in 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 thinking of using mixin this, wondering if there's better way this, function maybe? i'm not great sass, if me out. appreciated.

thanks.

i think mixin answer. (as 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 css:

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

if wanted group color values in scss file, use variables in conjunction 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); }