Езда на велосипеде по списку цветов с сассисом

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

$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?

Ответы

Ответ 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;
}