Use computed value in element using less.js -
have following bit of code:
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)); }
which gives me:
.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; }
what wanted was:
.marginright5 {... } .marginright10 {... } ...
how can use computed value in element name? tried using string functions no luck. appreciate help.
did more testing , came this:
.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)); }
would still know if there way. cheers.
Comments
Post a Comment