Question

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

$sw-primary-1: #ccc;

这些类在各地使用，即

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

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

即body class="redesign"

我基本上想去的地方

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

但是上面的方法不起作用，它仍然保持原始的sass变量颜色。

Answer 1

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

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

Source

$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');
    }
  }
}

根据身体类别更改sass变量

2 个答案: