How to change a class format based on body's class with SCSS?

Question

I am making a web app that is used in three (or more) different contexts, and I want each context to have a different color scheme. However, I don't want to have to maintain three different stylesheets when all that changes is colors, typically.

For instance, suppose the themes are red, blue, and orange. One of my stylesheets describes the link colors:

a {
  color: $some_color;
}

I want to split this based on the class applied to the body:

body.style1 {
  a {
   color: $red;
  }
}

body.style2 {
  a {
   color: $blue;
  }
}

body.style3 {
  a {
   color: $orange;
  }
}

You can see how this gets unwieldy pretty quickly if you're changing the style for lots of elements. Is there a way to do this more like this?

a {
  &closest:body.style1 {
    color: $red
  }
  &closest:body.style2 {
    color: $blue;
  }
  &closest:body.style3 {
    color: $orange;
  }
}

This way I can code my scss in a clearer, more maintainable way.

Answer 1

This is what I prefer. Define a mixin like body-style :

@mixin body-style($style, $map) {
  body.#{$style} & {
    @each $property, $value in $map {
       #{$property}: $value;
    }
  }
}

Then use this for every tag by passing $style as style class of body and $map as map of css keys and values.

a {
    @include body-style(style1, (
        color: red, 
        background: white
      )
    );
}

It will return :

body.style1 a {
  color: red;
  background: white;
}

Answer 2

It appers you don't have to have the & first, so this works (at least in 3.2.10):

a {
  body.style1 & {
    color: $red
  }
  body.style2 & {
    color: $blue;
  }
  body.style3 &{
    color: $orange;
  }
}