Generated by SassMeister.com.

gridGenerator.css

.row {
  position: relative;
  width: 100%;
  max-width: 940px;
  margin-bottom: 20px;
}
.row:before, .row:after {
  content: "";
  display: table;
}
.row:after {
  clear: both;
}
.row .col-1 {
  width: 8.33333%;
}
.row .col-2 {
  width: 16.66667%;
}
.row .col-3 {
  width: 25%;
}
.row .col-4 {
  width: 33.33333%;
}
.row .col-5 {
  width: 41.66667%;
}
.row .col-6 {
  width: 50%;
}
.row .col-7 {
  width: 58.33333%;
}
.row .col-8 {
  width: 66.66667%;
}
.row .col-9 {
  width: 75%;
}
.row .col-10 {
  width: 83.33333%;
}
.row .col-11 {
  width: 91.66667%;
}
.row .col-12 {
  width: 100%;
}
.row .columns, .row .column {
  position: relative;
  float: left;
  min-height: 1px;
  padding-right: 15px;
  padding-left: 15px;
}
.row .centered {
  float: none;
  margin: 0 auto;
}

gridGenerator.scss

// ----
// Sass (v3.4.9)
// Compass (v1.0.1)
// ----

//
// @functions
//

@function grid-calc($column-number,$total-columns) {
  @return percentage(($column-number / $total-columns));
}

// 
// clearfix @mixin
// 

@mixin clearfix {
    &:before, &:after { content: ""; display: table; }
    &:after { clear: both; }
}

// 
// create-grid @mixin  
// 

@mixin create-grid(
	$row-max-width: 940px, 
	$row-margin-bottom: 20px,
	$total-columns: 12, 
	$column-class-name: "col", 
	$column-gutter: 30px,
	$column-min-height: 1px,
	$row-collapse: false) {

    position: relative;
    width: 100%;
    max-width: $row-max-width;
    margin-bottom: $row-margin-bottom;
    @include clearfix();
    
    @if $row-collapse {
		margin-right: auto;
		margin-left: auto;
    }

    @for $i from 1 through $total-columns {
        .#{$column-class-name}-#{$i} {
          width: grid-calc($i, $total-columns);
        }
    }
    
  .columns, .column {
      position: relative;
      float: left;
      min-height: $column-min-height;
      padding-right: $column-gutter / 2;
      padding-left: $column-gutter / 2;
  }
  
  .centered {
		float: none;
		margin: 0 auto;
  }
}

.row {
  @include create-grid();
}