如何使用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; } 
    } 
}