骑自行车穿过一系列颜色与sass

Question

可以有三种颜色的列表:

$ 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)函数,但它在第一次通过列表后才停止应用颜色.我希望颜色能够继续循环,直到它用完列表项目以应用它们.

这有可能与萨斯？

Answer 1

如果它可以用纯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;
}