title: Can someone explain this Sass For loop syntax - #{$i}
body: <p>In the Sass docs, we have this:</p>
  
  <pre><code>@for $i from 1 through 3 {
    .item-#{$i} { width: 2em * $i; }
  }
  </code></pre>
  
  <p>I understand the loop. But I don't understand where in <code>.item-#{$i}</code> why the <code>$i</code> variable is encased in <code>#{}</code>? Why not just write <code>$i</code>?</p>
  
  <p>I've looked around and can't find anywhere that explains this. </p>