Simple SASS Percentages Grid

SASS Percent Grid

$max-width: 900px; // max width of main container
$total-columns: 12;  // total number of columns
$column-width: percentage( 75px / $max-width ); // columns are 75px wide
$gutter-width: percentage( 12px / $max-width ); // with 12px gutters

@function column( $column-size, $gutter: $gutter-width){
  @return $column-width * $column-size - $gutter-width;
}

.clearfix {
  zoom:1;
  &:before, &:after {
      content: "\0020";
      display: block;
      height: 0;
      overflow: hidden;
  }
  &:after {
      clear: both;
  }
}

.left{
  float: left;
}

.row{
  @extend .clearfix;
  margin-left: -$gutter-width;
}

.column{
  @extend .left;
  margin-left: $gutter-width;
}

@for $i from 1 through $total-columns {
  .col#{$i} {
    @extend .column;
    width: column($i);
  }
}

Then to use all you need is a div with a class of row and then number of columns you want.

<div class="row">
 <div class="col6">Here is a column</div>
 <div class="col6">Here is a column</div>
</div>

Feel free to leave comments! This is just a basic grid system would love to improve on this as well.