通过一系列的颜色与sass循环

有三种颜色的列表是可能的：

$ 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 ）函数，但是它只是在第一次通过列表后停止应用颜色。 我希望颜色能够保持骑行，直到列表中的项目用完为止。

这是可能的与sass？

Answer 1

如果它可能与纯CSS，可能与萨斯。 这将使用任何数量的颜色：

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