cycling through a list of colors with sass

Question

It is possible to have list of three colors:

$color-list: x y z;

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

I want:

<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) 

and so on and so forth.

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.

is this possible with sass?

Answer 1

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

Output:

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