SASSを使用してCSS3キーフレームステップを動的に生成するにはどうすればよいですか？

Question

私は、各ステップでtopを1ピクセルずつ増やす100ステップのキーフレームアニメーションを持っているとします。そのような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; } 
    } 
}