在SASS中访问阵列键

CSS

飞云

2020-03-23

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

我该怎么做？

第2667篇《在SASS中访问阵列键》来自Winter(https://github.com/aiyld/aiyld.github.io)的站点

共2个回答
梅Harry 2020.03.23

我遇到了类似的问题，并尝试了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。

卡卡西 2020.03.23

您可以使用@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所说，最好使用不带引号的字符串，因为这样您就可以传递任何颜色对象或函数

Sass参考@each指令

相似问题

0 回答

0 回答

5 回答

25 回答

0 回答

0 回答

问题类别

JavaScript Ckeditor Python Webpack TypeScript Vue.js React.js ExpressJS KoaJS CSS Node.js HTML Django 单元测试 PHP Asp.net jQuery Bootstrap IOS Android