loops - How to iterate keyframe percentages Less CSS -

i have read less#loops , less#functions docs. can't figure out how apply percentage function, or similar way loop percentages progressively without using such function.

when calculate it, out of loop, pointed out in post width: percentage(140/620); , works, not when trying loop using variables.

on 2014 @pixelass suggested use external library loop easier, don't feel using external library.

what trying loop (and doesn't compile):

.loop (@n, @index: 0) when (@index < @n) {      percentage(@index * (100/@n)){ // line messing day.          // code      }      .loop(@n, (@index + 1)); // next iteration. } @keyframes anim {     .loop(20); // launch loop. } 

i trying translate sass less:

@keyframes anim{      $steps:20;      @for $i 0 through $steps{          #{percentage($i*(1/$steps))}{              // code          }      }  } 

it seems less compiler not evaluate functions when directly used selector. solution make use of temporary variable in either of below snippets:

.loop (@n, @index: 0) when (@index <= @n) { /* note <= need 100% frame */   @keyframesel: percentage(@index/@n); /* note lack of * 100 less */   @{keyframesel}{     prop: value;   }   .loop(@n, (@index + 1)); // next iteration. } @keyframes anim {   .loop(20); // launch loop. } 

or

.loop (@n, @index: 0) when (@index <= @n) {   @keyframesel: @index/@n * 100%;   @{keyframesel}{     prop: value;   }   .loop(@n, (@index + 1)); // next iteration. } @keyframes anim {   .loop(20); // launch loop. }