SCSS @for循环:从数据属性获取长度 [英] SCSS @for loop: Get the length from data attribute
本文介绍了SCSS @for循环:从数据属性获取长度的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
是否有一种方法可以从scss @for循环中的元素的data属性获取循环的长度?
Is there a way to get the length of the loop from the data attribute of an element in scss @for loop?
因此，假设元素.fesa-info具有[data-fesa-num="8"]作为属性.我可以在下面的代码中使用8代替10，如果可以的话，如何使用?
So let's say the element .fesa-info has [data-fesa-num="8"] as an attribute. Can I use the 8 in place of 10 in the code below, and if so how?
@for $i from 1 through 10 {
.box:nth-of-type(#{$i}) {
background-color: darken(cornflowerblue, 0% + $i);
}
}
推荐答案
在body标记中创建数据属性并为其分配值:
Create a data attribute in the body tag and assign it a value:
<body data-fesa-num="8">
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
</body>
将data属性的值存储在变量中，并将10替换为变量名称:
Store the value of the data attribute in a variable and replace 10 with the the variable name:
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标签的单独块中声明变量:
You can also declare the variable in a separate block of the body tag:
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循环:从数据属性获取长度的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
