<分区>
<分区>
我正在尝试使用 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。
有什么想法吗？感谢您的帮助!
最佳答案
您可以使用 Sass 列表(和 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 列表不是从零开始的。
不过，这并不能解决使用单个变量的问题。它只是解决了多个 mixin 的问题。
编辑: JSBin of code
关于css - 替换变量并使用 sass 确定结果范围，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/31276247/