Generated by SassMeister.com.

SassMeister-input.scss

// ----
// Sass (v3.3.0.rc.1)
// Compass (v0.13.alpha.10)
// ----

@function ratio($numerator, $denominator) {
  @return ($numerator / $denominator) * 100%;
}

@mixin grid($columns: 8) {
  // List of unique ratios.
  $ratios: ();
  
  @for $i from 1 through $columns {
    @for $j from 1 through $i {
      $ratio: ratio($j, $i);
      // If the ratio hasn't been calculated yet.
      @if not index($ratios, $ratio) {
        $ratios: append($ratios, $ratio);
        $prefix: if($i == 1, "", "-#{$i}");
        
        .grid-u-#{$j}#{$prefix} {
          width: $ratio;
        }

        .grid-push-#{$j}#{$prefix} {
          margin-left: $ratio;
        }

        .grid-pull-#{$j}#{$prefix} {
          margin-left: -$ratio;
        }
      }
    }
  }
}

@include grid;

SassMeister-output.css

.grid-u-1 {
  width: 100%;
}

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

.grid-pull-1 {
  margin-left: -100%;
}

.grid-u-1-2 {
  width: 50%;
}

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

.grid-pull-1-2 {
  margin-left: -50%;
}

.grid-u-1-3 {
  width: 33.33333%;
}

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

.grid-pull-1-3 {
  margin-left: -33.33333%;
}

.grid-u-2-3 {
  width: 66.66667%;
}

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

.grid-pull-2-3 {
  margin-left: -66.66667%;
}

.grid-u-1-4 {
  width: 25%;
}

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

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

.grid-u-3-4 {
  width: 75%;
}

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

.grid-pull-3-4 {
  margin-left: -75%;
}

.grid-u-1-5 {
  width: 20%;
}

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

.grid-pull-1-5 {
  margin-left: -20%;
}

.grid-u-2-5 {
  width: 40%;
}

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

.grid-pull-2-5 {
  margin-left: -40%;
}

.grid-u-3-5 {
  width: 60%;
}

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

.grid-pull-3-5 {
  margin-left: -60%;
}

.grid-u-4-5 {
  width: 80%;
}

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

.grid-pull-4-5 {
  margin-left: -80%;
}

.grid-u-1-6 {
  width: 16.66667%;
}

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

.grid-pull-1-6 {
  margin-left: -16.66667%;
}

.grid-u-5-6 {
  width: 83.33333%;
}

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

.grid-pull-5-6 {
  margin-left: -83.33333%;
}

.grid-u-1-7 {
  width: 14.28571%;
}

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

.grid-pull-1-7 {
  margin-left: -14.28571%;
}

.grid-u-2-7 {
  width: 28.57143%;
}

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

.grid-pull-2-7 {
  margin-left: -28.57143%;
}

.grid-u-3-7 {
  width: 42.85714%;
}

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

.grid-pull-3-7 {
  margin-left: -42.85714%;
}

.grid-u-4-7 {
  width: 57.14286%;
}

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

.grid-pull-4-7 {
  margin-left: -57.14286%;
}

.grid-u-5-7 {
  width: 71.42857%;
}

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

.grid-pull-5-7 {
  margin-left: -71.42857%;
}

.grid-u-6-7 {
  width: 85.71429%;
}

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

.grid-pull-6-7 {
  margin-left: -85.71429%;
}

.grid-u-1-8 {
  width: 12.5%;
}

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

.grid-pull-1-8 {
  margin-left: -12.5%;
}

.grid-u-3-8 {
  width: 37.5%;
}

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

.grid-pull-3-8 {
  margin-left: -37.5%;
}

.grid-u-5-8 {
  width: 62.5%;
}

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

.grid-pull-5-8 {
  margin-left: -62.5%;
}

.grid-u-7-8 {
  width: 87.5%;
}

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

.grid-pull-7-8 {
  margin-left: -87.5%;
}