使用＆.conditionalClass更改SCSS $ var

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值推到顶级父类，并使其级联下？