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

假设我有一个关键帧动画，它有100个步骤，每个步骤增加

top

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

}

---

任何关于如何正确执行此操作的想法都将不胜感激

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

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

---

这个问题很好，但我认为这个例子很糟糕，因为线性动画不需要100个关键帧，所以0%和100%就足以实现同样的效果。