title: @for loops in styled-components
body: <p>I am trying to find a method in the styled-components documentation to create a loop. For example can I achieve this <code>scss</code> loop in styled-components?</p>
  
  <pre><code>@for $i from 0 through 20 {
    #loadingCheckCircleSVG-#{$i} {
      animation: fill-to-white 5000ms;
      animation-delay: ($i - 1.5) * 1s;
      fill: white;
      opacity: 0;
    }
  }
  </code></pre>
  
  <p>Is it possible?</p>