Програмно гнездящи правила със sass [duplicate] - css, sass, вложени

Така че основно имам списък с цветове и искам да променя цвета на границата на списъка в html в зависимост от това колко дълбоко е в DOM.

Това е 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; }

Това, което искам да направя, е да генерирам правилата .list на базата на броя на цветовете, които имам в променливата $ colors, вместо да го правя ръчно. Не мога да разбера как все пак.

Знам, че ще има @each или @for loop там, но не мога да намеря синтаксиса, за да работи. Не съм сигурен дали е възможно.

----- UPDATE: Моят собствен отговор -----

Тъй като въпросът беше отбелязан като дубликат Iне мога да публикувам този като действителен отговор, така че това ще трябва да направя. Благодаря Скрити Hobbes за вашия отговор. Това ми даде представа за това как синтаксис трябва да работи. написал това вместо това (аз ще приема твоя, въпреки че отговорът ти ми даде вдъхновение)

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

Отговори:

Следният код 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 Meister: http://sassmeister.com/gist/106687cca4d2a8ce5fc4