Sass Fraction Grid

_fraction-grid.scss

/*
  FRACTION GRID
  Fixed gutter, fluid width grid - infinite columns, nesting, overrides, etc.
  Inspired by http://builtbyboon.com/blog/proportional-grids
*/

// @OPTIMISE: larger/smaller + fluid gutters...

$w-gutter: 20px !default;
$w-max: 1000px !default;

@function fg-fraction($proportion,$container:$w-max) { // generate fraction as %
  @return percentage(($container*$proportion)/$container);
}

@mixin fg-container($gutter:$w-gutter) { // grid container
  @extend %clearfix;
  margin-left: #{-$gutter};
}

@mixin fg-col($proportion:1/1,$gutter:$w-gutter) { // column
  float: left;
  box-sizing: border-box;
  padding-left: $gutter;
  width: fg-fraction($proportion);
}

@mixin fg-push($proportion:1/1) { // column push
  margin-left: fg-fraction($proportion);
}

// EXAMPLE USAGE (use lowest common denominator)

.grid { @include fg-container; }

.col {
  // 12 column example...
  @include fg-col; // 12/12
  &-11-12 { @include fg-col(11/12); } // 11/12
  &-5-6 { @include fg-col(5/6); } // 10/12
  &-3-4 { @include fg-col(3/4); } // 9/12
  &-2-3 { @include fg-col(2/3); } // 8/12
  &-7-12 { @include fg-col(7/12); } // 7/12
  &-1-2 { @include fg-col(1/2); } // 6/12
  &-5-12 { @include fg-col(5/12); } // 5/12
  &-1-3 { @include fg-col(1/3); } // 4/12
  &-1-4 { @include fg-col(1/4); } // 3/12
  &-1-6 { @include fg-col(1/6); } // 2/12
  &-1-12 { @include fg-col(1/12); } // 1/12
  // ...but, look ma, infinite grids!
  &-1-5 { @include fg-col(4/5); }
  &-4-5 { @include fg-col(1/5); }
  &-1-7 { @include fg-col(1/7); }
  &-6-7 { @include fg-col(6/7); }
}

.push {
  &-1-12 { @include fg-push(1/12); } // push 1/12
}

/*
  <h1>Demo</h1>
  
  <p><strong>12 column grid</strong></p>

  <div class="grid">
    <div class="col-1-12"><code>1/12</code></div><div class="col-11-12"><code>11/12</code></div>
    <div class="col-1-6"><code>2/12</code></div><div class="col-5-6"><code>10/12</code></div>
    <div class="col-1-4"><code>3/12</code></div><div class="col-3-4"><code>9/12</code></div>
    <div class="col-1-3"><code>4/12</code></div><div class="col-2-3"><code>8/12</code></div>
    <div class="col-5-12"><code>5/12</code></div><div class="col-7-12"><code>7/12</code></div>
    <div class="col-1-2"><code>6/12</code></div><div class="col-1-2"><code>6/12</code></div>
  </div>

  <p><strong>Nesting</strong></p>

  <div class="grid">
    <div class="col-1-2">
      <code>
        6/12
        <div class="grid">
          <div class="col-1-3"><code>2/12</code></div>
          <div class="col-1-3"><code>2/12</code></div>
          <div class="col-1-3"><code>2/12</code></div>
        </div>
      </code>
    </div>
    <div class="col-1-2"><code>6/12</code></div>
  </div>

  <p><strong>Push</strong></p>

  <div class="grid">
    <div class="col-11-12 push-1-12"><code>11/12, push 1/12</code></div>
  </div>

  <p><strong>Off-grid</strong></p>

  <div class="grid">
    <div class="col-1-5"><code>1/5</code></div><div class="col-4-5"><code>4/5</code></div>
    <div class="col-1-7"><code>1/7</code></div><div class="col-6-7"><code>6/7</code></div>
  </div>
*/

Thanks @smallhadron for !default suggestion.