用萨斯骑行浏览颜色列表

循环 CSS

斯丁前端

2020-03-24

可能有三种颜色的列表：

$ color-list：xyz;

然后通过循环使用这三种颜色并将它们添加到无序列表项上。

我想要：

<li>row 1</li> (gets color x)
<li>row 2</li> (gets color y)
<li>row 3</li> (gets color z)
<li>row 4</li> (gets color x)

等等等等。

我曾尝试使用@each（http://sass-lang.com/docs/yardoc/file.SASS_REFERENCE.html#each-directive）函数，但是在第一次通过列表后，它只是停止应用颜色。我希望颜色保持循环，直到用尽列表项以将其应用到其中。

萨斯有可能吗？

第3275篇《用萨斯骑行浏览颜色列表》来自Winter(https://github.com/aiyld/aiyld.github.io)的站点

共1个回答
伽罗 2020.03.24

如果纯CSS有可能，Sass也有可能。这将适用于多种颜色：

http://codepen.io/cimmanon/pen/yoCDG

$colors: red, orange, yellow, green, blue, purple;

@for $i from 1 through length($colors) {
    li:nth-child(#{length($colors)}n+#{$i}) {
        background: nth($colors, $i)
    }
}

输出：

li:nth-child(6n+1) {
  background: red;
}

li:nth-child(6n+2) {
  background: orange;
}

li:nth-child(6n+3) {
  background: yellow;
}

li:nth-child(6n+4) {
  background: green;
}

li:nth-child(6n+5) {
  background: blue;
}

li:nth-child(6n+6) {
  background: purple;
}

相似问题

0 回答

0 回答

5 回答

25 回答

0 回答

0 回答

问题类别

JavaScript Ckeditor Python Webpack TypeScript Vue.js React.js ExpressJS KoaJS CSS Node.js HTML Django 单元测试 PHP Asp.net jQuery Bootstrap IOS Android