durch eine Liste von Farben mit Sass

Question

Radfahren Es ist möglich, eine Liste von drei Farben haben:

$ Farbe-Liste: x y z;

Und dann wenden Sie diese drei Farben an, indem Sie sie durchlaufen und auf einem ungeordneten Listenelement hinzufügen.

Ich möchte:

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

und so weiter und so fort.

Ich hatte versucht, die @each (http://sass-lang.com/docs/yardoc/file.SASS_REFERENCE.html#each-directive) -Funktion zu verwenden, aber dann hört es einfach auf, Farbe nach dem ersten Mal durch die Liste anzuwenden. Ich möchte, dass die Farben so lange weiterlaufen, bis die Listenelemente aufgebraucht sind.

ist das mit sass möglich?

Answer 1

Wenn es mit reinem CSS möglich ist, ist es mit Sass möglich. Dies wird mit einer beliebigen Anzahl von Farben arbeiten:

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

Ausgang:

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