Css 在SASS中访问数组键

我在SASS中有一个列表，我正试图使用括号符号访问其中的一个项目：

$collection[1];

但这给了我一个错误

还有别的办法吗

---

我为什么要这样做？

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

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

我有一个颜色列表，必须根据服务器分配给不同元素的颜色设置这些颜色。标记具有编号的类（

color-0

，

color-1

等）。以下是我的目标CSS：

.color-0{color:red}
.color-1{颜色：橙色}
.color-2{color:green}
.color-3{color:blue}
/*更多，更复杂的颜色*/

我想我可以使用带有循环的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 ];
    }
}

但这只给了我以下错误：

语法错误：“…颜色集合”：应为“；”之后的CSS无效，为“[$i]”

---

我如何才能做到这一点？

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

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

如果要传递带引号的字符串，也可以使用

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

---

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

刚刚遇到这个问题，并测试了bookcasey的答案，这个答案很好，但我想使用颜色名称作为类；我发现这段代码可以按照我的需要工作

$colors: ( 'black', 'white', 'red', 'green', 'blue' );

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

使用#{…}还可以使用函数，因此如果需要使用在规则中可能无法直接使用的任意名称，则可以使用

@for $i from 0 to length($colors) {
    .color-#{unquote(nth($colors, $i+1))} {
        // some rules that don't actually use the var
        // so there's no need to cache the var
    }
}

输出：

.color-black { color: black; }
.color-white { color: white; }
.color-red { color: red; }
// etc..

---

希望这对其他人有帮助

对于，您可以使用

@每个

规则，而不是

@规则，这更具语义，速度更快，并且使代码更短：

$color集合：（红色、橙色、绿色、蓝色）；
@$color集合中的每个$color{
.color-#{$color}{
颜色：$color；
}
}

或者，如果愿意，您可以使用
$color collection
列表直接进入
@each
指令：

@红色、橙色、绿色和蓝色的每个$color{
.color-#{$color}{
颜色：$color；
}
}

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

我遇到了类似的问题，并尝试了亚历克斯·格雷罗的解决方案。从我这里不工作，因为输出像
。颜色灰色：{gray}
而不是
.color-1:{gray}。所以我对它做了一些修改，它看起来像这样：

$color-pallete: (gray, white, red, purple)

$i: 0
@each $color in $color-pallete
    .color-#{$i}
        color: $color
    $i: $i + 1

哦，是的。我使用的是SASS，而不是SCSS。
与您的案例不完全相同，但该方法应该被证明是有用的：（使用@each）@steveax-Ugh！这正是我想要避免的。我可能有超过30种颜色在那里。把它们都列出来两次，让我想回到香草CSS；我认为这要整洁得多。你不必把它们列出来两次，只要把颜色名称/值像你拥有的那样放在
$color collection
中，然后你就可以用@each来浏览它们。在我链接的问题中，他也需要这些变量，而你不需要它们。有几种方法可以剥那只猫的皮，bookcasey的回答很好。太好了！这正是我想要的（尽管我不知道为什么在
for
循环中使用
length（$color collection）
，而不是缓存的
$color count
）。我想如果您计划在多个位置使用它，您可以将其保存为变量。：-）我要说的唯一一点是，它需要从1到长度（$color collection）
，因为SASS的数组从
1
开始，而不是
0
。