Change sass variable depending on a body class

Question

Let's say I have an existing code base using sass variables i.e.

$sw-primary-1: #ccc;

and these classes are used all over the place i.e.

.lifecycle {
    &.new {
      background-color: $sw-primary-1:
    }
  }
}

Is there anything I can do a large existing code base like this where I know want to change this colour palette variables depending on a different class on the body.

i.e. body class="redesign"

where I basically want to go

.redesign {
  $sw-primary-1: blue;
}

But the above doesn't work it still sticks with the original sass variable color.

possible duplicate of : https://stackoverflow.com/questions/50731596/dynamically-change-a-variable-based-on-class-name/50731668#50731668 — Temani Afif, Sep 03 '18 at 21:20
Possible duplicate of: https://stackoverflow.com/questions/52135505/appropriate-use-of-bem-in-css/52135600#52135600 — SuperDJ, Sep 03 '18 at 21:29

score 5 · Answer 1 · answered Sep 04 '18 at 08:38

It works.
Note that you should use the !global flag as well.

All variable assignments not at the top level of the document are now local by default. If there's a global variable with the same name, it won't be overwritten unless the !global flag is used. For example, $var: value !global will assign to $var globally. This behavior can be detected using feature-exists(global-variable-shadowing).

Source

$primary-color: blue;

.foo {
  color: $primary-color;
}

.bar {
  $primary-color: red !global;
  color: $primary-color;
}

score 0 · Answer 2 · answered Sep 03 '18 at 23:59

0

Another way to accomplish this is using mixins.

@mixin bkcolor($color) {
    background-color:$color;
}

.lifecycle {
    &.new {
      @include bkcolor('blue');
    }
  }
}

answered Sep 03 '18 at 23:59

Patricio Vargas

5,236
11
49
100

Change sass variable depending on a body class

2 Answers2