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

Question

比方说，我有一个关键帧动画，有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;} 

} 

关于如何正确做到这一点任何想法，将不胜感激。

Answer 1

生成百分比变量之前，然后将整个值作为字符串打印。上海社会科学院处理百分比单位之间的一些行动，所以你可以用$ i变量

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