我已阅读 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
}
}
}
最佳答案
当直接用作选择器时,Less 编译器似乎不会计算函数。解决方案是使用一个临时变量,如以下代码段之一:
.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 - 如何迭代关键帧百分比 Less CSS,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/38404204/