根据主体类更改 sass 变量

Question

假设我有一个使用 sass 变量的现有代码库，即

$sw-primary-1: #ccc;

这些类被到处使用，即

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

有什么我可以做一个像这样的大型现有代码库的，我知道想要根据主体上的不同类更改此调色板变量。

IE body class="redesign"

我基本上想去的地方

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

但是上面的方法不起作用，它仍然坚持原来的 sass 可变颜色。

Answer 1

有用。
请注意，您还应该使用!global标志。

默认情况下，所有不在文档顶层的变量赋值现在都是本地的。如果存在同名的全局变量，除非使用 !global 标志，否则它不会被覆盖。例如， $var: value !global 将全局分配给 $var。可以使用 feature-exists(global-variable-shadowing) 检测这种行为。

来源

$primary-color: blue;

.foo {
  color: $primary-color;
}

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