web-dev-qa-db-ja.com

sassで色のリストをサイクリング

3色のリストを持つことが可能です：

$ color-list：x y z;

次に、これらの3つの色を循環して、順序付けられていないリストアイテムに追加することにより、これらの3つの色を適用します。

が欲しいです：

<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で可能ですか？

loopssasseach
18
JoshuaRule

純粋な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;
}
39
cimmanon