Demo of using greatest-common-denominator function to chain extensions of classes in comparison to Stipe's grid output.

gcd-grid-system.scss

// Stipe v0.0.5.7.9

@function gcd($n, $d) {
  $num: if($n < $d, $d, $n);
  $denom: if($n < $d, $n, $d);
  $rem: $num;
  $last_rem: $num;
  @while $rem != 0 {
    $last_rem: $rem;
    $rem: $denom % $num;
    $denom: $num;
    $num: $rem;
  }
  @return 1;
}

$grid_columns: 12 !default;
$grid-name-space: flex-grid !default;

@mixin grid-setup($ns: $grid-name-space, $columns: $grid_columns) {
  // add hyphen to namespace if given
  $ns: if($ns == "", $ns, "#{$ns}-");
  // set up span values
  @for $d from 1 through $columns {
    @for $n from 1 through $d {
      $gcd: gcd($n, $d);
      $x: $n / $gcd;
      // regular classes used here just so we can see the output
      %#{$ns}#{$n}of#{$d} {
        @if $x < $n {
          @extend %#{$ns}#{$x}of#{$d / $gcd};
        }
        @else {
          width: $n / $d * 100%;
          float: left;
        }
      }
    }
  }
}

// Include the mixin in your project to execute the Sass output
@include grid-setup;

// Be sure to add a global reset
* {
  @include box-sizing;
}

// In your styles, simply extend the placeholder selector to your new semantic selector
// Using the function / mixin in this example will produce an array of widths that do not account for margins
.two-thirds-block {
  @extend %flex-grid-2of3;
}

.four-eights-block {
  @extend %flex-grid-4of8;
}

.four-of-twelve-flex {
  @extend %flex-grid-4of12;
}

// Using the Stipe Grid System, using a simulare process will produce widths with appropiate margins based on context and scale
.four-of-twelve-stipe {
  @extend %grid_4of12;
}

// Using a Stipe nested grid
.two-of-eight-nested-grid {
  @extend %grid_2of8_nested;
}

// Columns of 4 and 8 are assumed a mobile media query unless the `_nested` flag is added
.two-of-four-media-grid {
  @extend %grid_2of4;
}

.two-of-eight-media-grid {
  @extend %grid_2of8;
}

// Columns of 10 are asusmed a tablet portrait query unless the `_nested` flag is passed in
.two-of-10-media-grid {
  @extend %grid_2of10;
}

clever. almost avoided clicking this, as i was about to attempt it. http://codepen.io/saneplate/pen/BzNqKg kudos, sir. :) almost breaks my brain and reminds me i'm a designer 👍