title: Generating column classes with dynamic width using SASS
body: <p>I was trying to generate a dynamic grid system using SASS with variable widths using a <code>@for</code> loop. So far I have :</p>
  
  <pre><code>@for $value from 1 through 12 {
  
    $width: percentage(1/$value);
  
    .col-md-#{$value} {
      width: $width;
    }
  }
  </code></pre>
  
  <p>The output for the above code would be: </p>
  
  <pre><code>.col-md-1 {
    width: 100%;
  }
  
  .col-md-2 {
    width: 50%;
  }
  
  .
  .
  .
  
  .col-md-11 {
    width: 9.09091%;
  }
  
  .col-md-12 {
    width: 8.33333%;
  }
  </code></pre>
  
  <p>Is there anyway this could be reversed by tinkering with the percentage functions in such a way that: </p>
  
  <pre><code>.col-md-12 {
    width: 100%;
  }
  </code></pre>
  
  <p>and </p>
  
  <pre><code>.col-md-1 {
    width: 8.33333%;
  }
  </code></pre>
  
  <p>The opposite of what I currently have. Thanks in advance.</p>