根据body类改变sass变量

Question

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

$sw-primary-1: #ccc;

这些类在整个地方使用，即

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

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

即yaazkssvpoi

在哪里我基本上想去

body class="redesign"

但上述不起作用仍然坚持原始的sass可变颜色。

Answer 1

有用。 请注意，您也应该使用！global标志。

默认情况下，不在文档顶层的所有变量赋值都是本地的。如果存在具有相同名称的全局变量，则除非使用！global标志，否则不会覆盖该变量。例如，$ var：value！global将全局分配给$ var。可以使用feature-exists（全局变量阴影）检测此行为。

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

Source

Answer 2

另一种实现此目的的方法是使用mixins。

$primary-color: blue;

.foo {
  color: $primary-color;
}

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