如何减少关键帧百分比的CSS [英] How to iterate keyframe percentages Less CSS

问题描述

我已阅读 Less#loops 和

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.

当我进行计算时，就像另一个 post width: percentage(140/620);，它可以工作，但是在尝试使用变量循环时不起作用.

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.

2014年@pixelass建议使用外部库循环更容易，但我不想使用外部库.

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

我正在尝试将此Sass转换为Less:

I am trying to translate this Sass to Less:

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

推荐答案

当直接用作选择器时，Less编译器似乎不评估函数.解决方案是利用以下两个代码段中的一个临时变量:

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

或

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

这篇关于如何减少关键帧百分比的CSS的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！