Sass SCSS列表项颜色迭代

我是SCSS的新手，我正在尝试为选择器的所有项目设置背景色

我的css选择器如下所示，并返回两个独立UL列表的所有项目

#g-showcase .g-menu-item

我将颜色数组设置为：

$colors: #fad941, #ffffff, #e02520, #a6a6a6, #c6c6c6, #e02520;

我想迭代我的选择器结果，并从我的颜色数组中设置一个唯一的颜色，它可能比上面的更大

我开始玩一些代码，但我处理得不正确，因为我迭代的是颜色，而不是选择器项。我不知道怎么做：

@for $i from 1 through length($colors) {

    #g-showcase li:nth-child(#{length($colors)}n+#{$i}) {
        background: nth($colors, $i)
    }

}

我怎样才能达到预期的结果

谢谢大家!

---

S.

您的问题是——就SASS而言——它不知道您的HTML代码有多少li项，它是一个预处理器，从未真正看到DOM，因此它不知道何时停止生成CSS

我假设您希望做的是能够选择每个li项设置为其背景的颜色，而不是当前的颜色，即按照颜色数组中出现的顺序应用颜色

要做到这一点，您可以在HTML中添加一些额外的标记，以生成CSS，并稍微调整创建数组的方式，改用映射。您可能希望避免污染您的HTML，因为它会错误地标记，但是下面的方法会起作用

$colorz: foo:f24162， 酒吧：591240， 费用：4c5573， 烟度：6fa0a6， 眼睛：71d9d9 ; @$colorz中的每个$pointer、$bgcolor { g-li[pointer={$pointer}]{ 背景颜色； } } 快车 褐狐 跳过 懒汉 狗 …还有其他激动人心的故事 你经常听到的