使用less.js在元素中使用计算值

Question

请准备以下代码：

generate-margins(4);

.generate-margins(@n, @i: 1) when (@i =< @n) {
  .marginleft@{i} {
    margin-left: (5px * @i);
  }
  .marginright(5*@{i}) {
    margin-right: (5px * @i);
  }

  .generate-margins(@n, (@i + 1));
}

这给了我：

.marginleft1 {
  margin-left: 5px;
}
.marginright(5*1) {
  margin-right: 5px;
}
.marginleft2 {
  margin-left: 10px;
}
.marginright(5*2) {
  margin-right: 10px;
}
.marginleft3 {
  margin-left: 15px;
}
.marginright(5*3) {
  margin-right: 15px;
}
.marginleft4 {
  margin-left: 20px;
}
.marginright(5*4) {
  margin-right: 20px;
}

我想要的是：

.marginright5 {... }
.marginright10 {... }
...

如何在元素名称中使用计算值？我尝试使用所有字符串函数没有运气。非常感谢帮助。

Answer 1

做了一些更多的测试并想出了这个：

  .generate-margins(@n, @i: 1) when (@i =< @n) {
    @l : @i*5;
  .marginleft@{l} {
    margin-left: (5px * @i);
  }
  .marginright@{l} {
    margin-right: (5px * @i);
  }

  .generate-margins(@n, (@i + 1));
}

仍然想知道是否还有其他方法。欢呼声。