如何使用更少的循环构建CSS
如何使用更少的循环构建CSS
提问于 2019-05-21 04:18:51
我正在尝试使用LESS循环构建一个带有属性的CSSclasses列表。
@values : 10, 20, 30, 40, 50, 60, 70, 80, 90;
@widths : 20, 30, 40, 45, 50, 55, 60, 70, 80;
@index : 1;
.productStar-variations( @values; @widths; @index ) when (@index < 10) {
@value : extract(@values, @index);
@width : extract(@widths, @index);
.productStar-@{value}::after {
width: @width%;
color: @temp-primary;
}
.productStar-variations(@index + 1);
}
.productStar-variations(@values; @widths; @index);预期结果应该是：
.productStar-10::after {
width: 20%;
color: @temp-primary;
}
.productStar-20::after {
width: 30%;
color: @temp-primary;
}
.productStar-30::after {
width: 40%;
color: @temp-primary;
}
.productStar-40::after {
width: 45%;
color: @temp-primary;
}
.productStar-50::after {
width: 50%;
color: @temp-primary;
}
.productStar-60::after {
width: 55%;
color: @temp-primary;
}
.productStar-70::after {
width: 60%;
color: @temp-primary;
}
.productStar-80::after {
width: 70%;
color: @temp-primary;
}
.productStar-90::after {
width: 80%;
color: @temp-primary;
}然而，这在编译时会抛出错误。没有为.productStar-variations(2)找到匹配的定义，我似乎不知道这里发生了什么，它看起来相对简单。
回答 1
Stack Overflow用户
发布于 2019-05-21 04:43:41
为了纠正我的问题，我只需要纠正我那部分的一些语法错误。
@values : 10, 20, 30, 40, 50, 60, 70, 80, 90;
@widths : 20%, 30%, 40%, 45%, 50%, 55%, 60%, 70%, 80%;
@index : 1;
.productStar-variations(@values, @widths, @index);
.productStar-variations (@values, @widths, @i) when (@i < 10) {
@value: extract(@values, @i);
@width: extract(@widths, @i);
.productStar-@{value}::after {
width: @width;
color: @temp-primary;
}
.productStar-variations(@values, @widths, @i + 1);
}页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/56227636
复制相关文章
相似问题