Roizpi Roizpi - 4 months ago 53
Less Question

How to iterate keyframe percentages Less CSS

I have read Less#loops and Less#functions docs.
But I can't figure out how to apply

percentage
function, or a similar way to loop percentages progressively without using such function.

When I calculate it, out of a loop, as pointed out in another post
width: percentage(140/620);
, it works, but not when trying to loop using variables.

On 2014 @pixelass suggested to use an external library to loop easier, but I don't feel like using an external library.

What I am trying to loop (and doesn't even compile):

.loop (@n, @index: 0) when (@index < @n) {
percentage(@index * (100/@n)){ // This line is messing up my day.
// code
}
.loop(@n, (@index + 1)); // Next iteration.
}
@keyframes anim {
.loop(20); // Launch the loop.
}


I am trying to translate this Sass to Less:

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

Answer

It seems like the Less compiler does not evaluate functions when directly used as a selector. Solution would be to make use of a temporary variable like in either of the below snippets:

.loop (@n, @index: 0) when (@index <= @n) { /* note the <= as we need 100% frame also */
  @keyframeSel: percentage(@index/@n); /* note the lack of * 100 as Less already does it */
  @{keyframeSel}{
    prop: value;
  }
  .loop(@n, (@index + 1)); // Next iteration.
}
@keyframes anim {
  .loop(20); // Launch the 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 the loop.
}