Generated by SassMeister.com.

SassMeister-input.scss

// ----
// Sass (v3.3.14)
// Compass (v1.0.0.rc.1)
// ----

// Grid Variables
$g-cont-width   : 1100px;
$g-breakpoint   : 768px;
 
$g-col-width    : 65px;
$g-gutter-width : 20px;
$g-col-count    : 12;

// Set the "context" width for the grid.
@function g-context($g-col-width, $g-col-count ,$g-gutter-width) {
  $g-context: ($g-col-width * $g-col-count) + ($g-gutter-width * ($g-col-count - 1));
  @return $g-context;
}

// Loop Mixin
@mixin grid-columns {
  @for $i from 1 through $g-col-count {
	  $context: g-context($g-col-width, $g-col-count ,$g-gutter-width);
    $target: ($g-col-width * $i) + ($g-gutter-width * ($i - 1));
  
    // Generate and output the grid modifier classes
    &--#{$i} {
  	  width: percentage($target / $context);
    }
  }
}

// Grid
.grid {
  width: 100%;
	padding-left: 10px;
	padding-right: 10px;
	margin-left: auto;
	margin-right: auto;
	&__col {
    @include grid-columns;
	}
}

SassMeister-output.css

.grid {
  width: 100%;
  padding-left: 10px;
  padding-right: 10px;
  margin-left: auto;
  margin-right: auto;
}
.grid__col--1 {
  width: 6.5%;
}
.grid__col--2 {
  width: 15%;
}
.grid__col--3 {
  width: 23.5%;
}
.grid__col--4 {
  width: 32%;
}
.grid__col--5 {
  width: 40.5%;
}
.grid__col--6 {
  width: 49%;
}
.grid__col--7 {
  width: 57.5%;
}
.grid__col--8 {
  width: 66%;
}
.grid__col--9 {
  width: 74.5%;
}
.grid__col--10 {
  width: 83%;
}
.grid__col--11 {
  width: 91.5%;
}
.grid__col--12 {
  width: 100%;
}