在SASS中访问数组键

Question

我在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];"

---

我怎么能做到这一点？

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

因为那时你可以传递任何颜色对象.

Answer 2

您可以使用@each规则代替@for,更加语义,更快,并且使代码更短:

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

@each $color in $color-collection {
    .color-#{$color} {
        color: $color;
    }
}

或者如果您愿意,可以$color-collection直接在@each命令中使用list :

@each $color in red, orange, green, blue {
    .color-#{$color} {
        color: $color;
    }
}

正如@bookcasey所说,最好使用不带引号的字符串,因为那时你可以传递任何颜色对象或函数

@each指令的Sass参考