Использовать вычисленное значение в элементе используя less.js

Иметь следующий бит кода:

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 {... }
...

Как можно использовать вычисленное значение в имени элемента? Я попытался использовать все строковые функции без удачи. Очень ценю помощь.

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));
}

Все равно хотелось бы узнать, есть ли другой способ. Приветствия.

Другие вопросы по тегам