sass - 在 SCSS 中动态调用变量

Question

这个问题在这里已经有了答案:





Creating or referencing variables dynamically in Sass

(7 个回答)


6年前关闭。




我的网站有一系列已编号的颜色变量:

$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 中以编程方式生成它们。步骤之间红色的亮度变化不是与蓝色之间的相同，与绿色等的不同。)

Answer 1

首先，您建议的语法不起作用的原因是，当属性值中包含插值时，它周围的文本(例如“$”符号)被解释为纯 CSS。这在 interpolations 上的 SASS 引用中有所说明。 .

我建议使用 SASS lists反而。像这样的东西会给你你所追求的功能:

@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() function 的索引值是从一开始的，而不是从零开始的。)