Dynamic user configurable grid system

grid.scss

// ----
// Sass (v3.4.0.rc.1)
// Create dynamic grids based on user input
// Currently grids max at 8 columns
// 
// Example HTML:
// <div class="container max-grid-6">
//   <div class="row">
//     <div class="column"></div>
//     <div class="column span-4"></div>
//     <div class="column"></div>
//   </div>
// </div>
// ----

// ----
// Global variables
// ----
$container-max: 1800px;
$columns: 8; 


// ----
// Global styles
// ----

// Border-box sizing
*,
*::before,
*::after { box-sizing: border-box; }

// Clearfix class
.row::before,
.row::after { display: table; content: ""; }
.row::after { clear: both; }

// Grid container
.container {
  margin: auto;
  max-width: $container-max;
  width: 100%;
}

// Indivual column 
.column {
  background: #dbdbdb;
  padding-right: 1%;
  display: inline-block;
  width: 100%;
  // This demo required the negative margin
  // inline-block hack. I tested this in my project
  // I didn't need it. YMMV
  margin-left: -4px;
  
  &:nth-child(even) {
    background: lighten(#dbdbdb, 7%);
  }
}

// This was used to offset the negative margin hack
// Just like above, YMMV
[class*='max-grid-'] {
  margin-left: 4px;
}


// ----
// Iterate max-grid 1 through 4 and 5 through 8
// This is broken up to allow more control 
// over outputted values and media queries
// ----

// Max-grid iterate 1 through 4
@for $i from 1 through round($columns) {
  .max-grid-#{$i} .column {
    @if $i > 1 and $i < 3 {
      @media (min-width: 40em) {
        width: 100%/$i;
      }
    }
    @if $i >= 3 {
      @media (min-width: 60em) {
        width: 100%/$i;
      }
    }
  }
}

// Max-grid iterate 5 through 8
@for $i from 5 through $columns {
  .max-grid-#{$i} .column {
    @if $i % 2 == 0 {
      @media (min-width: 40em) {
        width: 100%/($i/2);
      }
      @media (min-width: 60em) {
        width: 100%/($i - 2);
      }
      @media (min-width: 80em) {
        width: 100%/$i;
      }
    } @else if $i % 2 == 1 {
      @media (min-width: 40em) {
        width: 100%/($i - 2);
      }
      @media (min-width: 60em) {
        width: 100%/$i;
      }
    }
  }
}


// ----
// Configureable spans
// Make two loops and set max-grid and span to each value
// Calculate span based on max-grid value
// Ignore span when it's value is larger than max-grid's
// ----
@for $i from 2 through $columns {
  @for $j from 2 through $columns {
    .max-grid-#{$i} .span-#{$j} {
      @if $i % 2 == 0 and $i >= $j {
        @media (min-width: 40em) {
          @if ($i/2) > $j {
            width: $j/($i/2) * 100%;
          } @else {
            width: 100%;
          }          
        }
        @media (min-width: 60em) {
          @if ($i - 2) > $j {
            width: $j/($i - 2) * 100%;
          } @else if $i/$j == 2 {
            width: 50%;
          } @else {
            width: 100%;
          }
        }
        @media (min-width: 80em) {
          @if $i > $j {
            width: $j/$i * 100%;
          }
        }
      } @else if $i % 2 == 1 and $i >= $j {
        @media (min-width: 40em) {
          @if ($i - 2) > $j {
            width: $j/($i - 2) * 100%;
          } @else {
            width: 100%;
          }
        }
        @media (min-width: 60em) {
          @if $i > $j {
            width: $j/$i * 100%;
          }
        }
      }
    }
  }
}