在SASS中访问阵列键

一尘不染

在SASS中访问阵列键

css

我在SASS中有一个列表，并且我正在尝试使用方括号表示法访问这些项目：

$collection[1];

但这给了我一个错误。

还有其他方法吗？

我为什么要这样做？

我有一个颜色列表，必须根据服务器分配给它们的颜色在不同的元素上进行设置。标记已编号的类（color-0，color-1等）。这是我的目标CSS：

.color-0 { color: red }
.color-1 { color: orange }
.color-2 { color: green }
.color-3 { color: blue }
/* many more, with more complex colors... */

我想不用手工编写所有内容，而是可以将SASS集合与循环一起使用：

$color-collection: ('red', 'orange', 'green', 'blue');
$color-count: length($color-collection);

@for $i from 0 to $color-count {
    .color-#{$i} {
        color: $color-collection[ $i ];
    }
}

但这只是给我以下错误：

语法错误：“ … color-collection”之后的CSS无效：预期的“;”为“ [$ i];”

我该怎么做？

阅读 322

2020-05-16

共1个答案

一尘不染

$color-collection: ('red', 'orange', 'green', 'blue');

@for $i from 0 to length($color-collection) {
    .color-#{$i} {
        color: unquote(nth($color-collection, $i+1));
    }
}

使用nth()，也unquote()如果你想通过引用的字符串。

不过，我个人不会：

$color-collection: (red, rgba(50,50,80, .5), darken(green, 50%), rgba(blue, .5));

@for $i from 0 to length($color-collection) {
    .color-#{$i} {
        color: nth($color-collection, $i+1);
    }
}

因为这样您可以传递任何颜色对象。

2020-05-16