Grid Layout SASS Concept - http://sassmeister.com/gist/8088973.

input.html

<div class="grid_row">
  <div class="col-3"></div>
  <div class="col-6"></div>
  <div class="col-3"></div>
</div>

input.scss

* {
    box-sizing: border-box;
}

$grid-count: 12;

@mixin el($name) {
@at-root #{&}[class*="_#{$name}"] {
    @content;
  }
}
@mixin md($name) {
@at-root #{&}[class*="-#{$name}"] {
    @content;
  }
}

$model-prnt: grid;
[class*="#{$model-prnt}"] {
  @at-root {
    @include el(row) {
      display: block;
      font-size: 0;
      width: 100%;
      > * {
        display: inline-block;
        vertical-align: top;
        font-size: 12px;
      }
    }
    $model-chld: col;
    [class*="#{$model-chld}"]{
      min-height: 100px;
      @at-root {
        @for $i from 1 through $grid-count {
          @include md($i) {
            width: 100% / $grid-count * $i;
          }
        }
      }
    }
  }
}
.grid_row [class*="col"]:nth-of-type(1) {
  background-color: red;
}
.grid_row [class*="col"]:nth-of-type(2) {
  background-color: blue;
}
.grid_row [class*="col"]:nth-of-type(3) {
  background-color: orange;
}

output.css

[class*="grid"][class*="_row"] {
  display: block;
  font-size: 0;
  width: 100%;
}
[class*="grid"][class*="_row"] > * {
  display: inline-block;
  vertical-align: top;
  font-size: 12px;
}
[class*="col"] {
  min-height: 100px;
}
[class*="col"][class*="-1"] {
  width: 8.33333%;
}
[class*="col"][class*="-2"] {
  width: 16.66667%;
}
[class*="col"][class*="-3"] {
  width: 25%;
}
[class*="col"][class*="-4"] {
  width: 33.33333%;
}
[class*="col"][class*="-5"] {
  width: 41.66667%;
}
[class*="col"][class*="-6"] {
  width: 50%;
}
[class*="col"][class*="-7"] {
  width: 58.33333%;
}
[class*="col"][class*="-8"] {
  width: 66.66667%;
}
[class*="col"][class*="-9"] {
  width: 75%;
}
[class*="col"][class*="-10"] {
  width: 83.33333%;
}
[class*="col"][class*="-11"] {
  width: 91.66667%;
}
[class*="col"][class*="-12"] {
  width: 100%;
}

.grid_row [class*="col"]:nth-of-type(1) {
  background-color: red;
}

.grid_row [class*="col"]:nth-of-type(2) {
  background-color: blue;
}

.grid_row [class*="col"]:nth-of-type(3) {
  background-color: orange;
}