如何迭代关键帧百分比 Less CSS

Question

我已阅读 Less#loops 和 Less#functions 文档。 但我不知道如何应用percentage 函数，或类似的方法来逐步循环百分比而不使用此类函数。

当我在另一个循环中计算它时，正如另一个 post width: percentage(140/620); 中指出的那样，它可以工作，但在尝试使用变量循环时却不行。

在 2014 年，@pixelass 建议使用外部 library 来更轻松地循环，但我不想使用外部库。

我要循环的内容（甚至不编译）：

.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.
}

我正在尝试将这个 Sass 翻译成 Less：

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

Answer 1

当直接用作选择器时，Less 编译器似乎不会评估函数。解决方案是使用以下任一 sn-ps 中的临时变量：

.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.
}

或

.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.
}