有没有办法从 scss @for循环中元素的数据属性中获取循环的长度？
因此，假设元素.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);
}
}
在 body 标记中创建数据属性并为其分配一个值：
<body data-fesa-num="8">
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
</body>
将数据属性的值存储在变量中，并将 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);
}
}