SASのループを使用してliの前に画像を割り当て

Question

li要素の前に2種類の画像を割り当て、SASSを書きたいと思います。それぞれ、または2つの異なるクラスにnth-child（）を使用する代わりに、forループのようにスマートな方法があるのだろうかと思います。ここで

は、CSSです：ここでは

.class1:before { 
    content: url('../images/image1.png'); 
} 
.class2:before { 
    content: url('../images/image2.png'); 
} 

はhtmlです：

<ul> 
    <li class="class1">text</li> 
    <li class="class2">text</li> 
    <li class="class1">text</li> 
    <li class="class2">text</li> 
    <li class="class1">text</li> 
    <li class="class2">text</li> 
    <li class="class1">text</li> 
    <li class="class2">text</li> 
    <li class="class1">text</li> 
    <li class="class2">text</li> 
    <li class="class1">text</li> 
</ul> 

Answer 1

あなたはこのようなnth-child()のoddとevenセレクタ使用することができます。

ul li:nth-child(odd) { 
    content: url('../images/image1.png'); 
} 
ul li:nth-child(even) { 
    content: url('../images/image2.png'); 
} 

EDITを：と:beforeセレクタを使用できますも同様である。これを試してみてください：

ul li:nth-child(odd):before { 
    content: url('../images/image1.png'); 
} 
ul li:nth-child(even)::before { 
    content: url('../images/image2.png'); 
}