Велоспорт по списку цветов с сассой

Question

Возможно иметь список из трех цветов:

$ color-list: x y z;

И затем примените эти три цвета, пройдя через них и добавив их к неупорядоченному элементу списка.

Я хочу:

<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), но затем он просто прекращает применять цвет после первого раза через список. Я хочу, чтобы цвета продолжали ездить на велосипеде, пока не закончились элементы списка, чтобы применить их.

Возможно ли это с помощью sass?

Answer 1

Если это возможно с чистым CSS, это возможно с Sass. Это будет работать с любым количеством цветов:

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