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