title: Using an each loop with numbers as names and properties with SASS
body: <p>I have some CSS classes that are all similar, there are just two things that change: their <code>name</code> and <code>width</code>.</p>
  
  <p>For example:</p>
  
  <pre><code>.col25 {
      float: left;
      width: 25%; // matches name
  }
  .col30 {
      float: left;
      width: 30%; // matches name
  }
  .col50 {
      float: left;
      width: 50%; // matches name
  }
  </code></pre>
  
  <p>This is the closest I can think of achieving this:</p>
  
  <pre><code>@each $col in 25, 33, 50 {
    .col-#{$col} {
      float: left;
      width: $col + %;
    }
  }
  </code></pre>
  
  <p><a href="http://codepen.io/anon/pen/jcdJt" rel="nofollow">http://codepen.io/anon/pen/jcdJt</a></p>
  
  <p>But I cannot just append the <code>%</code>.</p>
  
  <p>What would be the best way to write this with SASS, and allow me to easily add more if required?</p>