缺少 } 在 less generating dynamic 类 using loop

Question

我想生成这样的类

.w1 { width: 1%; }
.w2 { width: 2%; }
...
.w99 { width: 99%; }
.w100 { width: 100%; }

我创建了一个 LESS 循环，但是它抱怨我缺少一个括号。

Expected '}' but found 'i' on line 39 in file '/css/general.less':
 [38]:   (~".w@{index}") {
 [39]:      width: @{i}%;
       --^
 [40]:   }

我数过括号。我定位错了吗？我的错误在哪里？

@iterations: 100;

.width-loop (@i) when (@i > 0) {
     (~".w@{i}") {
        width: @{i}%;
     }
    .width-loop(@i - 1);
}
.width-loop(@iterations);

Answer 1

使用 "I" 而不是 "index"。将(~".w@{index}") {改为(~".w@{i}") {

编辑：从有问题的行中删除括号（我正在向 %

添加转义符）

 width: @i ~'%';

编辑：（% 符号前没有 SPACE）

@iterations: 100;

.width-loop (@i) when (@i > 0) {
     (~".w@{i}") {
        width: ~"@{i}%";
     }
    .width-loop(@i - 1);
}
.width-loop(@iterations);

缺少 } 在 less generating dynamic 类 using loop

Missing } in less generating dynamic classes using loop

less