ciclabile attraverso un elenco di colori con sass

Question

È possibile avere un elenco di tre colori:

$ color-list: x y z;

E quindi applicare questi tre colori scorrendoli e aggiungendoli a una voce di elenco non ordinata.

voglio:

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

e così via e così via.

Avevo provato a utilizzare la funzione @each (http://sass-lang.com/docs/yardoc/file.SASS_REFERENCE.html#each-directive) ma poi si interrompe solo dopo aver applicato il colore dopo la prima volta attraverso l'elenco. Voglio che i colori continuino a pedalare finché non esaurisce gli elementi di elenco per applicarli.

questo è possibile con sass?

Answer 1

Se è possibile con CSS puro, è possibile con Sass. Questo funziona con qualsiasi numero di colori:

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

uscita:

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