使用带有SASS

Question

我想在li元素之前分配2种图片，写SASS。我不知道是否有更聪明的方法，比如for循环，而不是对每个或两个不同的类使用nth-child（）。

这是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');
}

编辑：您也可以将:before选择器与:nth-child()一起使用。试试这个：

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