<分区>
所以基本上我有一个颜色列表，我想根据它在 DOM 中的深度更改 html 中列表的边框颜色。
这是我目前拥有的 SASS:
$colors:
green,
red,
blue,
orange,
;
.list {
border-color:nth($C-subList-borders,1);
.list {
border-color:nth($C-subList-borders,2);
.list {
border-color:nth($C-subList-borders,3);
.list {
border-color:nth($C-subList-borders,4);
}
}
}
}
生成此 css:
.list { border-color: green; }
.list .list { border-color: red; }
.list .list .list { border-color: blue; }
.list .list .list .list { border-color: orange; }
我想做的是根据 $colors 变量中的颜色数量生成 .list 规则，而不是手动执行。我不知道怎么办。
我知道它里面会有一个@each 或@for 循环，但我想不出使它工作的语法。我不确定这是否可能。
-----更新:我自己的答案-----
由于问题被标记为重复，我无法将其作为实际答案发布，因此必须这样做。感谢 Hidden Hobbes 的回答。这让我了解了语法应该如何工作。你的回答中有一个多余的@each，所以我改写了这个(我会接受你的，因为你的回答给了我灵感)
$colors: green red blue orange;
$class: '.list';
$selector: $class;
@for $i from 1 through length($colors) {
$color: nth($colors,$i);
#{$selector} {
border-color: $color;
}
$selector: $selector $class;
}