我在 SASS 中有一个列表,我正在尝试使用括号表示法访问其中的一个元素:
$collection[1];
但这给了我一个错误。
还有其他方法吗?
我为什么要这样做?
我有一个颜色列表,必须根据服务器分配给它们的颜色在不同元素上设置这些颜色。标记具有编号类(color-0
、color-1
等)。这是我的 objective-c SS:
.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 ];
}
}
但这只会给我以下错误:
Syntax error: Invalid CSS after "...color-collection": expected ";", was "[ $i ];"
我怎样才能做到这一点?
最佳答案
$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);
}
}
因为这样你就可以传递任何颜色对象。
关于css - 访问 SASS 中的数组键,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/15079280/