how to make a loop in less css -
i'm starting use preprocessor css in case less css. i'm trying achieve loop padding.
example less.org modified
.generate-pad(10); .generate-pad(@n, @i: 1) when (@i =< @n) { .padd-top-@{i} { padding-top: (@i * 100px / @n); } .generate-pad(@n, (@i + 1)); }
outputs following when compiled
.padd-top-1 { padding-top: 10px; } .padd-top-2 { padding-top: 20px; } .padd-top-3 { padding-top: 30px; } .padd-top-4 { padding-top: 40px; } .padd-top-5 { padding-top: 50px; } .padd-top-6 { padding-top: 60px; } .padd-top-7 { padding-top: 70px; } .padd-top-8 { padding-top: 80px; } .padd-top-9 { padding-top: 90px; } .padd-top-10 { padding-top: 100px; }
but trying replace .pad-top-@{i}
variable can call later. how can achieve if possible in less.