title: How to dynamically generate a list of classes with commas separating them?
body: <p>I'm working with the SCSS syntax of SASS to create a dynamic grid system but I've hit a snag.</p>
  <p>I'm trying to make the grid system completely dynamic like this:</p>
  <pre><code>$columns: 12;
  </code></pre>
  <p>then I create the columns like this:</p>
  <pre><code>@mixin col-x {
    @for $i from 1 through $columns {
    .col-#{$i} { width: $column-size * $i; }
    }
  }
  </code></pre>
  <p>Which outputs:</p>
  <pre><code>.col-1 {
      width: 4.16667%;
    }
  
  .col-2 {
      width: 8.33333%;
  }
  etc...
  </code></pre>
  <p>This works well but <strong>what I want to do next is dynamically generate a long list of column classes separated by commas based on the number of $columns chosen</strong> - e.g I want it to look like this:</p>
  <pre><code>.col-1,
  .col-2,
  .col-3,
  .col-4,
   etc... {
  float: left;
  }
  </code></pre>
  <p>I've tired this:</p>
  <pre><code>@mixin col-x-list {
    @for $i from 1 through $columns - 1 {
    .col-#{$i}-m { float: left; }
    }
  }
  </code></pre>
  <p>but the output is this:</p>
  <pre><code>.col-1 {
    float: left;
  }
  .col-2 {
    float: left;
  }
  etc...
  </code></pre>
  <p>I'm a little stuck on the logic here as well as the SCSS syntax required to create something like this.</p>
  <p>Does anyone have any ideas?</p>