How to dynamically generate CSS3 keyframe steps using SASS?

css, css-animations, sass

Solution

generate the percentage variable before then print the entire value as a string. sass handles number operations between percentage units so you can use the $i variable

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

Problem

Let's say I have a key frame animation that has 100 steps that increases `top` by 1 px in each step. It would be logical to use a program to generate such a css. ``` @keyframes animation { 0% {top:0px;} 1% {top:1px;} 2% {top:2px;} ... 99% {top:99px;} 100% {top:100px;} } ``` While this can be done easily in JS, I want to know if there is a way to do it in SASS. The main problem I'm having right now is I could not find a way to dynamically generate the steps selectors (1%, 2%, 3% etc) . I have tried `#{string}` syntax but it will produce an invalid syntax error if used in the percentage selectors, for example: ``` $num: 100; @keyframes animation { #{num}% {top:0px;} } ``` Any idea on how to do this correctly would be appreciated.

Original source