Question

我正在尝试找到一个智能解决方案，用sass替换品牌颜色变量并确定每个组件的结果范围。

例如，这是.scss我有

$value-to-replace: #000000;
$brand-color-1:    #007be4;
$brand-color-2:    #e1a22e;

.btn {
  margin: 0;
  padding: 10px;
  background-color: $value-to-replace;
}

这是我正在尝试生成的编译.css

.btn {
  margin: 0;
  padding: 10px;
}
.brand-color-1 > .btn{
  background-color: #007be4;
}
.brand-color-2 > .btn{
  background-color: #e1a22e;
}

为了写这个.html

<main class="brand-color-1">
  <a class="btn" href="#">Button Text</a>
</main>

<main class="brand-color-2">
  <a class="btn" href="#">Button Text</a>
</main>

我想要实现的是允许我在所有组件中使用变量$value-to-replace的东西。无需为每个组件编写mixin。

有什么想法吗？谢谢你的帮助！

Answer 1

您可以使用Sass Lists（以及nth function）和@while循环：

$colors: (#007be4, #e1a22e);

.btn {
  margin: 0;
  padding: 10px;
}

$index: 1;

@while $index <  3
{
  .brand-color-#{$index} > .btn { 
     background-color: nth($colors, $index);
  }
  $index: $index + 1;
}

对于列表中的每种颜色，您将为该值创建一个新类。 Sass列表不是从零开始的。

但这并不能解决使用单个变量的问题。它只是解决了多个mixins的问题。

修改： JSBin of code

替换变量并使用sass将结果作为范围

1 个答案: