在SASS

访问数组键我有SASS列表，我试图用括号标记上的项目的访问：在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 ]; 
    } 
}

但这只是给了我以下错误：

Syntax error: Invalid CSS after "...color-collection": expected ";", was "[ $i ];"

我怎样才能做到这一点？

来源

2013-02-26 MegaHit

与您的情况不完全相同，但方法应该证明有用：http://stackoverflow.com/questions/14695965/sass-increment-a-class-and-choose-the-next-variable-in-a -list/14696447＃14696447（使用@each） – steveax 2013-02-26 00:45:40

@steveax - 呃！这正是我想要避免的。那里我可能会有超过30种颜色。把它们全部列出来，只是让我想要回到香草CSS;我认为这很干净。 – MegaHit 2013-02-26 00:49:36

您不必将它们列出两次，只需将颜色名称/值放在'$ color-collection'中，就像您拥有它们一样，然后使用@each旋转它们。在我连接的问题的情况下，他需要他们作为你不需要的变数。有几种方法可以让猫和书柜的答案很好。 – steveax 2013-02-26 01:12:10

$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-26 00:47:51 bookcasey

完美！正是我想要的（尽管我不知道为什么你要在'for'循环中使用'length（$ color-collection）'而不是缓存的'$ color-count'）。 – MegaHit 2013-02-26 00:53:57

我想如果你打算在多个地方使用它，你可以把它保存为一个变量。 :-) – bookcasey 2013-02-26 00:55:42

只有我要说的是，它需要从'1到长度（$ color-collection）'，因为SASS'数组从'1'开始而不是'0'。 – 2014-01-07 17:28:52

刚刚遇到这个并经过测试的bookcasey的答案，效果很好，但我想使用颜色名称作为类;我发现这个代码可以根据需要工作。

3210

使用＃{...}允许您使用功能为好，所以如果你需要使用可能无法在规则直接使用的任意名称，你可以使用

@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-08 05:54:18 JoshuaDoshua

可以使用@each规则，而不是@for，这是更多的语义，更快，它使代码更短：

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

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

或者，如果你喜欢，你可以使用$color-collection列表直接进入@each指令：

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

由于@bookcasey说，最好使用未加引号的字符串因为这样你可以传递任何颜色的对象或功能

Sass reference for @each directive

来源

2013-12-09 16:36:22

我有类似的问题，并试图亚历克斯·格雷罗的解决方案。没有工作，形成我造成输出就像.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-20 15:58:14

回答

相关问题