title: scss loop in SVG
body: <p><strong>HTML File</strong></p>
  
  <pre><code>&lt;svg width="500" height="500"  class="c"&gt;
    &lt;circle class="c1" stroke-width="5"/&gt;
    &lt;circle class="c2" /&gt;
    &lt;circle class="c3" /&gt;
    &lt;circle class="c4" /&gt;
    &lt;circle class="c5" /&gt;
    &lt;circle class="c6" /&gt;
    &lt;circle class="c7" /&gt;
    &lt;circle class="c8" /&gt;
    &lt;circle class="c9" /&gt;
    &lt;circle class="c10" /&gt;
   &lt;/svg&gt;
  </code></pre>
  
  <p>I want to loop in scss and to assign the radius as i*1.16 and other parameters. not sure of the syntax</p>
  
  <p><strong>SCSS FIle:</strong></p>
  
  <pre><code>$GOLDEN-CIRCLE-COUNT: 10;
  $BASE-COLOR:red;
  
     @for $i from 1 through $GOLDEN-CIRCLE-COUNT {
  
        svg:nth-child(c + &amp;{$i}) { 
          r: $i*1.16;
          stroke: red;
          cx: 250px;
          cy: 250px;
          background-color: lighten($BASE-COLOR, $i * 5%);
        } 
      }
  </code></pre>