我所知道的是:
@iterations: 8;
.mixin-loop (@index) when (@index > 0) {
.my-class-@{index} {
width: (100% / @index);
}
.mixin-loop(@index - 1);
}
.mixin-loop (0) {}
.mixin-loop(@iterations);
... 将产生这样的结果:
.my-class-8{width:12.5%}
.my-class-7{width:14.285714285714286%}
.my-class-6{width:16.666666666666668%}
.my-class-5{width:20%}
.my-class-4{width:25%}
.my-class-3{width:33.333333333333336%}
.my-class-2{width:50%}
.my-class-1{width:100%}
... 使其成为 LESS 等同于:
for (var i = 8; i > 0; -- i) {
// …
}
我的问题是:LESS 相当于什么:
for (var i = 8; i > 0; -- i) {
for (var j = 4; j > 0; -- j) {
// …
}
}
……看起来像?
最佳答案
嗯,没关系——我自己找到的。
为了后代,我把答案留在这里:
@maxi: 8;
.i-loop (@i) when (@i > 0) {
@maxj: 8;
.j-loop (@j) when (@j > 0) {
.my-class-@{i}-@{j} {
width: (100% / @i);
height: (100% / @j);
}
.j-loop(@j - 1);
}
.j-loop (0) {}
.j-loop(@maxj);
.i-loop(@i - 1);
}
.i-loop (0) {}
.i-loop(@maxi);
关于css - 如何使用 LESS CSS 创建嵌套循环?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/17011090/