我已阅读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
}
}
}
答案 0 :(得分:5)
似乎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.
}