我的网站有一系列编号的颜色变量:
$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 中以编程方式生成它们。步骤之间的红色亮度变化不是与蓝色之间的相同,与绿色之间的不同,等等)