`nth（$ list、$ n）`のsass引数 `$ n`は数字でなければなりません

Question

Sassリストでは、インデックス値を変数で表すことはできますか？ SASS nth(colors,index)で

$colors:#111 #222 #333 #444; 
@for $i from 1 through 4 { 
    :nth-child(#{$i}):after{ 
     background: nth($colors, #{$i}); 
    } 
} 

、indexは、変数を使用することができますか？

Answer 1

はい。あなたはあなたの構文にいくつかの問題があり、あなたは何のn番目の子を定義していません。この例は、リストアイテムにあなたのサスを適用する方法を示しています。これは配列の長さを使ってループの数を決定するのに対して、手動で設定すると4になります。

$colors: #111 #222 #333 #444; 
    @for $i from 1 through length($colors) { 
    li:nth-child(#{length($colors)}n+#{$i}) { 
    background: nth($colors, $i); 
    } 
} 

https://jsfiddle.net/ggwa3bv1/1/

Answer 2

あなたが代わりにマップを使用することができ、https://jsfiddle.net/uyzk15d6/

$colors: (
    red: 1, 
    green: 2, 
    blue: 3, 
    orange: 4 
); 

@each $color, $child in $colors { 
    li:nth-child(#{$child}n) { 
     background: $color; 
    } 
}