Generated by SassMeister.com.

SassMeister-input.scss

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



// Attributes
// ----------------------------------
$grid-default-column-count: 12 !default;
$grid-default-gutter-width: 20px !default;


// Utils
// ----------------------------------
@mixin clearFix() {
  &:after {
    content: "";
    display: table;
    clear: both;
  }
}

@function get-cell-width($column-span, $column-count) {
  @return $column-span * 100% / $column-count;
}


// Grid Container Mixins
// ----------------------------------
@mixin grid-container-gutter(
  $gutter-width: $grid-default-gutter-width
) {
  margin: (-0.5 * $gutter-width);
}

@mixin grid-container(
  $gutter-width: $grid-default-gutter-width
) {
  display: block;
  @include grid-container-gutter($gutter-width);
  @include clearFix();
}


// Grid Cell Mixins
// ----------------------------------
@mixin grid-cell-width(
  $column-span: 1,
  $column-count: $grid-default-column-count
) {
  width: get-cell-width($column-span, $column-count);
}

@mixin grid-cell-gutter(
  $gutter-width: $grid-default-gutter-width
) {
  padding: (0.5 * $gutter-width);
}

@mixin grid-cell-flow(
  $cell-flow: 'inline'
) {
  @if $cell-flow == 'left' {
    float: left;
    margin-right: 0;
  } @else if $cell-flow == 'right' {
    float: right;
    margin-right: 0;
  } @else {
    display: inline-block;
    vertical-align: top;
    margin-right: -0.25em;
  }
}

@mixin grid-cell-push(
  $column-offset: 1,
  $column-count: $grid-default-column-count
) {
  margin-left: get-cell-width($column-offset, $column-count);
}

@mixin grid-cell-pull(
  $column-offset: 1,
  $column-count: $grid-default-column-count
) {
  margin-right: get-cell-width($column-offset, $column-count);
}

@mixin grid-cell(
  $column-span: 1,
  $column-count: $grid-default-column-count,
  $gutter-width: $grid-default-gutter-width,
  $cell-flow: 'inline'
){
  @include grid-cell-flow($cell-flow);
  @include grid-cell-width($column-span, $column-count);
  @include grid-cell-gutter($gutter-width);
}


// Grid Generator Mixins
// ----------------------------------
@mixin grid-class-generator(
  $column-count: $grid-default-column-count,
  $gutter-width: $grid-default-gutter-width,
  $class-prefix: "",
  $class-suffix: ""
) {
  @for $counter from 1 through $column-count {
    .#{$class-prefix}col-#{$counter}#{$class-suffix} {
      @include grid-cell($counter, $column-count, $gutter-width);
    }
    .#{$class-prefix}pull-#{$counter}#{$class-suffix} {
      @include grid-cell-pull($counter - 1, $column-count);
    }
    .#{$class-prefix}push-#{$counter}#{$class-suffix} {
      @include grid-cell-push($counter - 1, $column-count);
    }
  }

  .#{$class-prefix}row#{$class-suffix} {
    @include grid-container($gutter-width);
  }
  .#{$class-prefix}col-right#{$class-suffix} {
    @include grid-cell-flow('right');
  }
  .#{$class-prefix}col-left#{$class-suffix} {
    @include grid-cell-flow('left');
  }
  .#{$class-prefix}col-inline#{$class-suffix} {
    @include grid-cell-flow('inline');
  }
}

@include grid-class-generator(12, 1em, 'grid-');

SassMeister-output.css

.grid-col-1 {
  display: inline-block;
  vertical-align: top;
  margin-right: -0.25em;
  width: 8.33333%;
  padding: 0.5em;
}

.grid-pull-1 {
  margin-right: 0%;
}

.grid-push-1 {
  margin-left: 0%;
}

.grid-col-2 {
  display: inline-block;
  vertical-align: top;
  margin-right: -0.25em;
  width: 16.66667%;
  padding: 0.5em;
}

.grid-pull-2 {
  margin-right: 8.33333%;
}

.grid-push-2 {
  margin-left: 8.33333%;
}

.grid-col-3 {
  display: inline-block;
  vertical-align: top;
  margin-right: -0.25em;
  width: 25%;
  padding: 0.5em;
}

.grid-pull-3 {
  margin-right: 16.66667%;
}

.grid-push-3 {
  margin-left: 16.66667%;
}

.grid-col-4 {
  display: inline-block;
  vertical-align: top;
  margin-right: -0.25em;
  width: 33.33333%;
  padding: 0.5em;
}

.grid-pull-4 {
  margin-right: 25%;
}

.grid-push-4 {
  margin-left: 25%;
}

.grid-col-5 {
  display: inline-block;
  vertical-align: top;
  margin-right: -0.25em;
  width: 41.66667%;
  padding: 0.5em;
}

.grid-pull-5 {
  margin-right: 33.33333%;
}

.grid-push-5 {
  margin-left: 33.33333%;
}

.grid-col-6 {
  display: inline-block;
  vertical-align: top;
  margin-right: -0.25em;
  width: 50%;
  padding: 0.5em;
}

.grid-pull-6 {
  margin-right: 41.66667%;
}

.grid-push-6 {
  margin-left: 41.66667%;
}

.grid-col-7 {
  display: inline-block;
  vertical-align: top;
  margin-right: -0.25em;
  width: 58.33333%;
  padding: 0.5em;
}

.grid-pull-7 {
  margin-right: 50%;
}

.grid-push-7 {
  margin-left: 50%;
}

.grid-col-8 {
  display: inline-block;
  vertical-align: top;
  margin-right: -0.25em;
  width: 66.66667%;
  padding: 0.5em;
}

.grid-pull-8 {
  margin-right: 58.33333%;
}

.grid-push-8 {
  margin-left: 58.33333%;
}

.grid-col-9 {
  display: inline-block;
  vertical-align: top;
  margin-right: -0.25em;
  width: 75%;
  padding: 0.5em;
}

.grid-pull-9 {
  margin-right: 66.66667%;
}

.grid-push-9 {
  margin-left: 66.66667%;
}

.grid-col-10 {
  display: inline-block;
  vertical-align: top;
  margin-right: -0.25em;
  width: 83.33333%;
  padding: 0.5em;
}

.grid-pull-10 {
  margin-right: 75%;
}

.grid-push-10 {
  margin-left: 75%;
}

.grid-col-11 {
  display: inline-block;
  vertical-align: top;
  margin-right: -0.25em;
  width: 91.66667%;
  padding: 0.5em;
}

.grid-pull-11 {
  margin-right: 83.33333%;
}

.grid-push-11 {
  margin-left: 83.33333%;
}

.grid-col-12 {
  display: inline-block;
  vertical-align: top;
  margin-right: -0.25em;
  width: 100%;
  padding: 0.5em;
}

.grid-pull-12 {
  margin-right: 91.66667%;
}

.grid-push-12 {
  margin-left: 91.66667%;
}

.grid-row {
  display: block;
  margin: -0.5em;
}
.grid-row:after {
  content: "";
  display: table;
  clear: both;
}

.grid-col-right {
  float: right;
  margin-right: 0;
}

.grid-col-left {
  float: left;
  margin-right: 0;
}

.grid-col-inline {
  display: inline-block;
  vertical-align: top;
  margin-right: -0.25em;
}