使用 sass 循环浏览颜色列表 [英] cycling through a list of colors with sass

问题描述

可以有三种颜色的列表:

It is possible to have list of three colors:

$color-list: x y z;

$color-list: x y z;

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

And then apply these three colors by cycling through them and adding them to on an unordered list item.

我想要:

<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) 函数，但它只是在第一次通过列表后停止应用颜色.我希望颜色保持循环，直到用完可应用它们的列表项.

I had tried to use the @each (http://sass-lang.com/docs/yardoc/file.SASS_REFERENCE.html#each-directive) function but then it just stops applying color after the first time through the list. I want the colors to keep cycling until it runs out of list items to apply them to.

这可以用 sass 实现吗?

is this possible with sass?

推荐答案

如果可以使用纯 CSS，则可以使用 Sass.这适用于任意数量的颜色:

If its possible with pure CSS, its possible with Sass. This will work with any number of colors:

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

这篇关于使用 sass 循环浏览颜色列表的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！