如何使用SASS动态生成CSS3关键帧步骤？

Question

假设我有一个关键帧动画,top每步有100步,增加1像素.使用程序生成这样的css是合乎逻辑的.

@keyframes animation
{
    0%   {top:0px;}
    1%  {top:1px;}
    2%  {top:2px;}
    ...
    99%  {top:99px;}
    100% {top:100px;}
}

虽然这可以在JS中轻松完成,但我想知道是否有办法在SASS中执行此操作.

我现在遇到的主要问题是我找不到动态生成步骤选择器的方法(1%,2%,3%等).

我尝试过#{string}语法,但如果在百分比选择器中使用它会产生无效的语法错误,例如:

$num: 100;

@keyframes animation
{
    #{num}%   {top:0px;}

}

任何关于如何正确地做到这一点的想法将不胜感激.

Answer 1

生成百分比变量,然后将整个值打印为字符串.sass处理百分比单位之间的数字操作,因此您可以使用$ i变量

@keyframes manySteps {
  @for $i from 0 through 100 {
    $percent: 0% + $i;
    #{$percent} { top: 1px; }
  }
}