以编程方式嵌套规则 sass

Question

所以基本上我有一个颜色列表，我想根据它在 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 循环，但我想不出使它工作的语法。我不确定这是否可能。

-----更新：我自己的答案-----

由于问题被标记为重复问题，我无法post将其作为实际答案，因此必须这样做。感谢 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;
}

Answer 1

下面的 SASS 代码应该可以得到您想要的结果。 @each 语句将遍历每种颜色。 @for 循环基于列表中颜色的索引，并将正确数量的 .list 附加到选择器。

$colors: green red blue orange;

@each $color in $colors {
    $i: index($colors, $color);
    @for $c from 1 through $i {
        @if $c == 1 {
            $selector: '.list';
        } @else {
            $selector: $selector '.list';
        }
    }
    #{$selector} {
        border-color: #{$color};
    }
}

SASS 大师：http://sassmeister.com/gist/106687cca4d2a8ce5fc4

以编程方式嵌套规则 sass

Programmatically nest rules with sass

css

nested

sass