Програмувати гніздо правилами з sass [дублікат] - css, sass, вкладені

Отже, в основному у мене є список кольорів, і я хочу змінити колір межі списку в html залежно від того, наскільки він глибокий у DOM.

Це той САС, який я маю на даний момент:

$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 на основі кількості кольорів, які я маю в змінній $ color, а не робити це вручну. Я не можу зрозуміти, як все-таки.

Я знаю, що там буде цикл @each або @for, але я не можу зрозуміти синтаксис, щоб він працював. Я не впевнений, чи можливо це навіть можливо.

----- ОНОВЛЕННЯ: Моя власна відповідь -----

Оскільки питання було позначене як дублікат Iя не можу розмістити це як фактичну відповідь, тому це доведеться робити. Дякую прихованому Гоббсу за вашу відповідь. Це дало мені уявлення про те, як повинен працювати синтаксис. У вашій відповіді був надлишковий @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;
}

Відповіді:

Наведений нижче код SASS повинен отримати результат, за яким ви прагнете. The @each оператор буде проходити через кожен колір. The @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