Creating the master of all grids

master-of-grid.scss

// ----
// libsass (v0.7.0)
// ----

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

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

%grid-float { float: left; }

@mixin grid-setup($ns: $grid-name-space, $columns: $grid_columns) {
  @for $denominator from 1 through $columns {
    @for $number from 1 through $denominator {
      $gcd: gcd($number, $denominator);
      .#{$ns}-#{$number}of#{$denominator} {
        @extend %grid-float;
        @if $number == $denominator {
          width: 100%;
        }
        @if $number < $denominator {
          $colWidth: $default-grid / $denominator;
          $totalColWidth: $colWidth * $number - 20;
          
          colWidth: $colWidth;
          totalColWidth: $totalColWidth;
          
          margin: 0 10px;
          width: $totalColWidth / $default-grid * 100%;
        }
      }
    }
  }
}

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



// 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;
// }

[class*=grid] {
  background-color: red;
}

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

.outer-block {
  width: 960px;
  height: 100px;
  background-color: blue;
  margin: 0 auto;
}