Использовать вычисленное значение в элементе используя 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));
}
Все равно хотелось бы узнать, есть ли другой способ. Приветствия.