CODEWITHSUNDEEP
csssass
StevieB
StevieB

Reputation: 6533

Change sass variable depending on a body class

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.

Upvotes: 1

Views: 3695

Answers (2)

Quentin
Quentin

Reputation: 3289

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

Upvotes: 6

Patricio Vargas
Patricio Vargas

Reputation: 5522

Another way to accomplish this is using mixins.

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

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

Upvotes: 0

Related Questions