29

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

我怎样才能做到这一点？

4

4 回答 4

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

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

于 2013-02-26T00:47:51.293 回答
6

您可以使用@eachrule 代替@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 参考

于 2013-12-09T16:36:22.603 回答
3

刚刚遇到这个并测试了 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..

希望这对其他人有帮助！

于 2013-12-08T05:54:18.140 回答
1

我有类似的问题并尝试了 Alex Guerrero 解决方案。对我不起作用，因为输出就像.color-gray:{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。

于 2017-10-20T15:58:14.230 回答