SASS或LESS关键帧百分比循环

bul*_*y97 4 loops sass less css-animations

我正在测试一些特殊的东西,我正在尝试在关键帧内循环以动态地将百分比写入其中.

我用SASS测试了类似的东西,但它不起作用.

@keyframes test{

    @for $i from 0 through 100 {
        #{$i}% {
            //do special stuff
        } 
        $i: $i + 1;
    }
Run Code Online (Sandbox Code Playgroud)

我希望它输出:

@keyframes test{
    0%{
          ...
    }
    1%{
          ...
    }
    2%{
          ...
    }
    3%{
          ...
    }
    ...
}
Run Code Online (Sandbox Code Playgroud)

但是我得到了

Error on line number: 23. Invalid CSS after "    #{$i}%": expected placeholder name, was " {"
Run Code Online (Sandbox Code Playgroud)

我已经在LESS测试了这个,它也不起作用.

    @a: 0%;

    @keyframes test{

       .func (@a, @b, @c);

    }

    .func (@a, @b, @c) when (@a < 100%){  
        (@a){
            //do special stuff
        }

        .func (@a+1, @b, @c);
    }
Run Code Online (Sandbox Code Playgroud)

有人能帮我吗 ?

boo*_*sey 11

如果你这样做,它会工作:

@keyframes test {
  @for $i from 0 through 100 {
    #{$i * 1%} {
      // do special stuff
    } 
  }
}
Run Code Online (Sandbox Code Playgroud)