Css 使用sass以编程方式嵌套规则

所以基本上我有一个颜色列表，我想根据列表在DOM中的深度来改变html中列表的边框颜色

这就是我目前的态度：

$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循环，但我不知道如何使用语法。我甚至不确定这是否可能

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

由于问题被标记为重复，我无法将其作为实际答案发布，因此必须这样做。谢谢你的回答。这让我了解了语法应该如何工作。你的答案中有一个多余的@每个，所以我写了这个（我会接受你的答案，因为你的答案给了我灵感）

---

下面的SASS代码应该可以得到您想要的结果。

@每个

语句将循环使用每种颜色。

@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 Meister:

不完全相信这是重复的。虽然到目前为止这两个问题在循环列表和嵌套列表方面有相似之处，但我认为使用

$colors

变量作为循环的来源使得这个问题差异很大，不会被视为重复。例如，我的答案与链接的问题无关。使用颜色而不是边距的事实不足以证明这是“不重复的”。如何获得步骤数与此无关：还有很多其他问题涉及如何循环浏览项目列表。同样相关的还有：很高兴我能提供帮助。你的回答肯定比我的建议要简洁得多！

$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};
    }
}