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规则，而不是手动执行.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;
}

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 Meister：http://sassmeister.com/gist/106687cca4d2a8ce5fc4

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

1 个答案: