在SCSS中动态调用变量

时间:2012-05-20 19:18:19

标签: sass

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

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

1 个答案:

答案 0 :(得分:5)

首先,你的建议语法不起作用的原因是因为当插值包含在属性值中时,它周围的文本(例如'$'符号)被解释为纯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的索引值是从一开始的,而不是从零开始的。)