Come generare dinamicamente i passi dei keyframe CSS3 usando SASS?

Question

Diciamo che ho un'animazione di fotogrammi chiave con 100 passaggi che aumenta di top di 1 px in ogni passaggio. Sarebbe logico utilizzare un programma per generare un tale css.

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

Anche se questo può essere fatto facilmente in JS, voglio sapere se c'è un modo per farlo in SASS.

Il problema principale che sto avendo ora è che non sono riuscito a trovare un modo per generare dinamicamente i selettori di passi (1%, 2%, 3% ecc.).

ho cercato #{string} sintassi, ma produrrà un errore di sintassi non valida se utilizzato nei selettori percentuali, ad esempio:

$num: 100; 

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

} 

Qualche idea su come farlo correttamente sarebbe apprezzato.

Answer 1

genera la variabile percentuale prima di stampare l'intero valore come una stringa. sass gestisce le operazioni di numero compreso tra unità percentuali in modo da poter utilizzare la variabile $ i

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