css - 访问 SASS 中的数组键

Question

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

---

我怎样才能做到这一点？

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

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