Question

有没有办法从scss @for循环中的元素的data属性中获取循环的长度？

因此，假设元素.fesa-info具有[data-fesa-num="8"]作为属性。我可以在下面的代码中使用8代替10，如果是，如何使用？

@for $i from 1 through 10 {
    .box:nth-of-type(#{$i}) {
        background-color: darken(cornflowerblue, 0% + $i);
    }
}

Answer 1

在body标记中创建数据属性并为其指定值：

<body data-fesa-num="8">
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
</body>

将data属性的值存储在变量中，并将10替换为变量名称：

body {
    $no: attr('data-fesa-num');

    .box {
        height: 100px;
        width: 100px;
        margin-bottom: 10px;
    }
    @for $i from 1 through $no {
            .box:nth-of-type(#{$i}) {
                    background-color: darken(cornflowerblue, 0% + $i);
            }
    }
}

您还可以在body标记的单独块中声明变量：

body {
    $no: attr('data-fesa-num') !global;
}

.box {
    height: 100px;
    width: 100px;
    margin-bottom: 10px;
}

@for $i from 1 through $no {
    .box:nth-of-type(#{$i}) {
        background-color: darken(cornflowerblue, 0% + $i);
    }
}

SCSS @for循环：从数据属性获取长度

1 个答案: