Question

您好我正在查看网格布局，我需要能够从数据属性中定义的数字启动选择器并将其结束于另一个数字。这是我正在使用的标记：

<div class="plp__products__item" data-product-grid-position="1"></div>
<div class="plp__products__item" data-product-grid-position="2"></div>
<div class="plp__products__item" data-product-grid-position="3"></div>
<div class="plp__products__item" data-product-grid-position="4"></div>
<div class="plp__products__item" data-product-grid-position="5"></div>
<div class="plp__products__item" data-product-grid-position="6"></div>
<div class="plp__products__item" data-product-grid-position="7"></div>

我希望能够从data-product-grid-position="3"和data-product-grid-position="6"中进行选择。我可以使用SASS进行实施。

.plp__products__item[data-product-grid-position=" from 3 until 6"] {
    background: green;
}

我想知道是否可以在SASS中编写能够处理此问题的函数。

Answer 1

试试这件事，

@for $i from 3 through 6 {
    .plp__products__item:nth-child(#{$i}) {
        background: green;
    }
}

Answer 2

我发现以下SASS功能可以解决问题：

@for $i from 3 through 6 {
    .plp__products__item[data-product-grid-position="#{$i}"] {
        background: green;
    }
}

选择器以特定数字开始和结束

2 个答案: