我的网站有一系列已编号的颜色变量：
$red-1: #821B0D;
$red-2: #B13631;
$red-3: #D75B5B;
$red-4: #F18788;
$red-5: #FDB9B0;
我想设置一个动态调用它们的 mixin，如下所示：
@mixin link($color-name) {
color: $#{$color-name}-2;
&:hover {
color: white;
background-color: $#{$color-name}-4;
}
}
但是，我不知道如何以这样的方式调用变量。 （上面的语法不起作用。）
（为了避免明显的建议：我没有使用 SASS 的颜色函数，因为我的颜色不是由线性饱和度或亮度变化设置的。我无法在 SASS 中以编程方式生成它们。步骤之间红色的亮度变化不是与蓝色之间的相同，与绿色之间的不同等）
首先，您建议的语法不起作用的原因是，当属性值中包含插值时，其周围的文本（例如“$”符号）将被解释为纯 CSS。 SASS 参考文献中对此进行了说明插值.
我建议使用 SASSlists反而。像这样的东西会给你你想要的功能：
@mixin link($color) {
color: nth($color, 2);
&:hover {
color: white;
background-color: nth($color, 4);
}
}
$red: (#821B0D, #B13631, #D75B5B, #F18788, #FDB9B0);
.test {
@include link($red);
}
（请注意，传递给nth() 函数是从一开始的，而不是从零开始。）
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
