title: Consolidate Similar SCSS Classes
body: <p>I have two sets of 48 classes that all have similar structure, and I was wondering if there was an elegant way to consolidate them in SCSS. </p>
  
  <p>The first set follows this pattern</p>
  
  <p>It's repeated up to Twelve Columns, each time the width going up by 1/12. The margins stay the same. Then the entire structure of twelve columns is repeated 4 times, one for xsmall, small, medium, and large. The only differences here are class name so</p>
  
  <pre><code>.largeOneColumn {
      width: calc(8.33% - #{$column-spacing}) !important;
      margin-left: $column-margins !important;
      margin-right: $column-margins !important;
  }
  </code></pre>
  
  <p>would be an example. </p>
  
  <p>The second set is </p>
  
  <pre><code>.col-xsmall-offSet-12 {
      left: 100%;
    }
  .col-xsmall-offSet-11 {
      left: 91.66%;
    }
  </code></pre>
  
  <p>Same general idea, decrements to 1, which reduces <code>left:</code> by 1/12 each time. Then repeated 4 times across xsmall, small, medium, large. </p>
  
  <p>I was hoping to use some SCSS to make all this more elegant and condensed, instead of needing to repeat so much code. </p>
  
  <p>Thanks!</p>