Изменение переменной SCSS $ с помощью & .conditionalClass

Question

Я ищу способ изменить несколько атрибутов в моих компонентах SCSS.Я подумал, добавив $var: false !default;, а затем добавив условный класс

&.conditionalClass { // If the class exists on the element
  $var: true; // Change the variable to true.
} 

И затем, используя операторы @if/@else, я мог бы изменить значения этих атрибутов на те, которые я хотел бы получить.

@if ($var == true) {
  backgroud-color: red;
} @else {
  background-color: green;
}

Но это, похоже, не работает ... поскольку переменная $var не обновляется для каждого экземпляра компонента, и поэтому значение всегда оценивается как $var: true;, несмотря на то, что некоторые изэкземпляры компонентов не имеют conditionalClass.

Итак, я полагаю, я спрашиваю, почему это работает для каждого компонента:

background-color: red;
&.conditionalClass {
  background-color: green;
}

И как я могу это сделатьповторяя это в синтаксис этого типа:

$var: false !default;

&.conditionalClass {
  $var: true;
}

@if $var == true {
  background-color: green;
} @else {
  background-color: red;
}

Теперь я понимаю, что

&.conditionalClass {
  $var: true;
}

локально ограничен, поэтому он не будет передан потомкам родителя.класс, но есть ли способ заставить его передать значение $var в родительский класс верхнего уровня и сделать это каскадом вниз?