Question

我有这个问题，在我的工作中，我们有一个包含数千行scss代码和几个变量的基础项目。当只需要一个网站就可以使用这个基础时，一切都很好，开发速度很快。我可以更改$generalColor变量，并应用正确的颜色。

问题出现在某个地方，在同一个项目中，需要一组新的颜色（变量）（微型网站）。然后通常需要搜索使用$generalColor的每个地方并添加如下内容：

$generalColor_SOMETHING: #453543;
.newExtraSetOfColor & {
    background: $generalColor_SOMETHING;
}

每个变量*每个新的颜色组。如果有很多微型网站/颜色组，这是一场噩梦。

有更好的方法吗？（javascript喜欢？）

Answer 1

它适用于 ！global 标记（SASS documentation）。

$theme-color: black;

.my-red-theme {
    $theme-color: red !global;
}

Answer 2

你可以用mixin做这样的事情：

$colors: (
  // Default color set
  default: (
    red: #ff0000,
    green: #ff0000,
    blue: #ff0000
  ),
  // Pastel color set
  pastel: (
    red: #ff6961,
    green: #77dd77,
    blue: #aec6cf
  )
);

@mixin color($color) {
  color: map-get(map-get($colors, default), $color);  

  .colors--pastel & {
    color: map-get(map-get($colors, pastel), $color);  
  }
}

h1 {
  @include color(red);
}

输出：

h1 {
  color: #ff0000;
}
.colors--pastel h1 {
  color: #ff0000;
}

SCSS根据父类改变变量？

2 个答案: