Wie können CSS3-Keyframe-Schritte mithilfe von SASS dynamisch generiert werden?

Question

Angenommen, ich habe eine Schlüsselbildanimation mit 100 Schritten, die top in jedem Schritt um 1 px erhöht. Es wäre logisch, ein Programm zu verwenden, um ein solches CSS zu erzeugen.

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

Während dies leicht in JS getan werden kann, möchte ich wissen, ob es eine Möglichkeit, es in SASS zu tun ist.

Das Hauptproblem, das ich gerade habe, ist, konnte ich keinen Weg finden, die Stufen Selektoren (1%, 2%, 3% usw.) dynamisch zu erzeugen.

Ich habe #{string} Syntax versucht, aber es wird einen ungültigen Syntaxfehler erzeugen, wenn in dem Prozentsatz Selektoren verwendet, zum Beispiel:

$num: 100; 

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

} 

Jede Idee, wie man dies richtig geschätzt würde zu tun.

Answer 1

erzeugen Sie die Prozentvariable, bevor Sie dann den gesamten Wert als String ausgeben. sass Griffe Anzahl Operationen zwischen Prozenteinheiten, so dass Sie die $ i verwenden können variable

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