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.