在选择器内部重写SASS变量

当主体上有特定类时，我试图重写变量的值。我希望能够根据我添加到正文中的这个类改变到不同的“主题”

主颜色的默认变量

$primary: #6cc907;

重写主变量

.branded {
  $primary: #e43e94;
}

---

对于此应用程序，请考虑使用

mixin

而不是变量。在选择器中，可以包含

mixin

并向其传递变量。您甚至可以为

mixin

变量设置默认值，在本例中，您的基本

背景色

。通过传递

mixin

一个新值来覆盖它

Sass

@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
  }
}

可能存在的副本