Изменить переменную sass в зависимости от класса тела

Question

Допустим, у меня есть существующая база кода, использующая переменные sass, т.е.

$sw-primary-1: #ccc;

и эти классы используются повсеместно, т.е.

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

Есть ли что-нибудь, что я могу сделать с большой существующей кодовой базой, подобной этой, где я знаю, что хочу изменить переменные этой цветовой палитры в зависимости от другого класса в теле.

т.е.. body class="redesign"

куда я в основном хочу пойти

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

Но вышеприведенное не работает, оно все равно остается с исходным переменным цветом sass.

Answer 1

Работает.
Обратите внимание, что вы также должны использовать флаг ! Global .

Все переменные назначения не на верхнем уровне документа теперь являются локальными по умолчанию. Если есть глобальная переменная с таким же именем, она не будет перезаписана, если не используется флаг! Global. Например, $ var: value! Global назначит $ var глобально. Это поведение может быть обнаружено с помощью feature-существующие (global-variable-shadowing).

Источник

$primary-color: blue;

.foo {
  color: $primary-color;
}

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

Answer 2

Еще один способ сделать это - использовать миксины.

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

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