SCSS Grid

scss_grid.scss

$columns: 12 !default;
$gutter: 30px !default;
$max-width: 1170px;

.grid {
  margin: 0px auto;
  max-width: $max-width;
  width: 100%;
}

.grid__row {
  margin-left: -$gutter/2;
  margin-right: -$gutter/2;
  width: 100%;

  @extend .clearfix;
}

@for $i from 1 through $columns {

  .grid__unit--#{$i} {
    float: left;
    min-height: 1px;
    padding: 0 $gutter/2;
    position: relative;
    width: percentage( $i / $columns );
  }

}