css - 根据 body 类更改 sass 变量

Question

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

$sw-primary-1: #ccc;

这些类在所有地方都使用，即

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

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

IEbody 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;
}

Answer 2

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

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

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