CSS 在 SASS 中访问数组键
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/15079280/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Accessing an array key in SASS
提问by MegaHit
I have a list in SASS, and I'm trying to access on of the items by using bracket notation:
我在 SASS 中有一个列表，我正在尝试使用括号表示法访问其中的项目：
$collection[1];
but that gives me an error.
但这给了我一个错误。
Is there any other way to do this?
有没有其他方法可以做到这一点？
Why do I want to do this?
我为什么要这样做？
I have a list of colors that have to be set on different elements according to a colors assigned to them by the server. The markup has numbered classes (color-0, color-1, etc.). Here's the CSS I'm aiming for:
我有一个颜色列表，必须根据服务器分配给它们的颜色在不同元素上设置这些颜色。标记已编号的类（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... */
Instead of writing it all by hand, I figured I could use a SASS collection with a loop:
我想我可以使用带有循环的 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 ];
}
}
but this just gives me the following error:
但这只是给了我以下错误：
Syntax error: Invalid CSS after "...color-collection": expected ";", was "[ $i ];"
语法错误：“...color-collection”之后的 CSS 无效：预期为“;”，为“[ $i ];”
How can I accomplish this?
我怎样才能做到这一点？
回答by bookcasey
$color-collection: ('red', 'orange', 'green', 'blue');
@for $i from 0 to length($color-collection) {
.color-#{$i} {
color: unquote(nth($color-collection, $i+1));
}
}
Use nth(), also unquote()if you want to pass quoted strings.
如果您想传递带引号的字符串nth()，也可以使用, unquote()。
Though, I personally wouldn't:
虽然，我个人不会：
$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);
}
}
Because then you can pass any color object.
因为那样你就可以传递任何颜色对象。
回答by Alex Guerrero
You can use @eachrule instead of @for, which is more semantic, faster, and it makes the code shorter:
您可以使用@eachrule 代替@for，它更具语义、速度更快，并且可以使代码更短：
$color-collection: (red, orange, green, blue);
@each $color in $color-collection {
.color-#{$color} {
color: $color;
}
}
Or if you prefer you can use $color-collectionlist directly into the @eachdirective:
或者，如果您愿意，可以$color-collection直接在@each指令中使用list ：
@each $color in red, orange, green, blue {
.color-#{$color} {
color: $color;
}
}
As @bookcasey says is preferable to use unquoted stringsbecause then you can pass any color object or function
正如@bookcasey 所说，最好使用不带引号的字符串，因为这样您就可以传递任何颜色对象或函数
回答by JoshuaDoshua
just came across this and tested bookcasey's answer, which works well but I wanted to use the color name as the class instead; I found that this code works as I needed.
刚刚遇到这个并测试了 bookcasey 的答案，效果很好，但我想改用颜色名称作为类；我发现这段代码可以按我的需要工作。
$colors: ( 'black', 'white', 'red', 'green', 'blue' );
@for $i from 0 to length($colors) {
$thisColor: unquote(nth($colors, $i+1));
.color-#{$thisColor} {
color: $thisColor;
}
}
using the #{...} allows you to use functions as well, so if you need to use an arbitrary name that may not be used directly in the rules you could use
使用 #{...} 也允许您使用函数，因此如果您需要使用可能无法直接在规则中使用的任意名称，则可以使用
@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
}
}
output:
输出：
.color-black { color: black; }
.color-white { color: white; }
.color-red { color: red; }
// etc..
Hope this helps someone else!
希望这对其他人有帮助！
回答by Karol Ko?odziejczyk
I had similar problem and tried Alex Guerrero solution. Didn't work form me cause output was like .color-gray:{gray};instead of .color-1:{gray};.So I modified it a bit and it looks like this:
我遇到了类似的问题并尝试了 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
Oh, ye. I use SASS, not SCSS.
哦，是的。我使用 SASS，而不是 SCSS。
