loops - for - sass control directives

ciclismo a través de una lista de colores con sass

Question

Es posible tener una lista de tres colores:

$ color-list: xyz;

Y luego aplique estos tres colores recorriéndolos y agregándolos a un elemento de lista desordenado.

Yo quiero:

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

y así sucesivamente y así sucesivamente.

Intenté usar la función @each ( http://sass-lang.com/docs/yardoc/file.SASS_REFERENCE.html#each-directive ) pero luego simplemente deja de aplicar el color después de la primera vez en la lista. Quiero que los colores sigan ciclando hasta que se agoten los elementos de la lista para aplicarlos.

¿Es esto posible con sass?

Answer 1

Si es posible con CSS puro, es posible con Sass. Esto funcionará con cualquier cantidad de colores:

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

Salida:

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