Sass 在SCSS中动态调用变量

我的站点有一系列编号为off的颜色变量：

$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参考中有所说明

我建议改用SASS。类似这样的功能将为您提供所需的功能：

@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);
}

---

（请注意，传递给的索引值是基于一的，而不是基于零的。）

这就是我最后要做的。学习SASS列表及其功能最近改变了我的生活。