用萨斯骑行浏览颜色列表 [英] 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可能吗?
推荐答案
如果纯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;
}
这篇关于用萨斯骑行浏览颜色列表的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!