Question

当主体上有特定的类时，我试图覆盖变量的值。我希望能够转变为不同的主题＆＃39;基于我添加到身体的这个类。

我的主要颜色的默认变量

$primary: #6cc907;

覆盖主要变量

.branded {
  $primary: #e43e94;
}

Answer 1

考虑为此应用程序使用mixin而不是变量。在您的选择器中，您可以包含mixin并将其传递给变量。您甚至可以为mixin变量设置默认值，在本例中为基数background-color。通过传递mixin新值来覆盖它。

<强>萨斯

@mixin bg-color($primary: #6cc907) {
  background-color: $primary;
}

div {
  @include bg-color(); // Use default value

  display: inline-block;
  height: 300px;
  width: 200px;

  &.branded {
    @include bg-color(#e43e94); // Override value
  }
}

Codepen example

覆盖选择器内的SASS变量

1 个答案: