Generated by SassMeister.com.

SassMeister-input-HTML.html

<div class="outer-container">
  <div class="row">
    <div class="col16">16</div>
  </div>
  <div class="row">
    <div class="col4">4</div>
    <div class="col4">4</div>
    <div class="col4">4</div>
    <div class="col4">4</div>
  </div>
  <div class="row">
    <div class="col8">8</div>
    <div class="col3">3</div>
    <div class="col5">5</div>
  </div>
</div>

SassMeister-input.scss

// ----
// Sass (v3.3.5)
// Compass (v1.0.0.alpha.18)
// Bourbon (v)
// Neat (v)
// ----

@import "bourbon/bourbon";
@import "neat/neat";

$max-width: em(1280);
$grid-columns: 16;

body {
  margin-top: 1rem;
  background: #333;
  font-family: Avenir, sans-serif;
}

.outer-container {
  @include outer-container;
}

%row {
  margin-bottom: 1em;
  @include row;
}

%col {
  background: fuchsia;
  padding: 1em;
  color: white;
}

.row {
  @extend %row;
} 

.col2 {
  @extend %col;
  @include span-columns(2);
}

.col3 {
  @extend %col;
  @include span-columns(3);
}

.col4 {
  @extend %col;
  @include span-columns(4);
}

.col5 {
  @extend %col;
  @include span-columns(5);
}

.col6 {
  @extend %col;
  @include span-columns(6);
} 

.col8 {
  @extend %col;
  @include span-columns(8);
} 

.col16 {
  @extend %col;
  @include span-columns(16);
} 

SassMeister-output.css

* {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

body {
  margin-top: 1rem;
  background: #333;
  font-family: Avenir, sans-serif;
}

.outer-container {
  max-width: 80em;
  margin-left: auto;
  margin-right: auto;
}
.outer-container:after {
  content: "";
  display: table;
  clear: both;
}

.row {
  margin-bottom: 1em;
  display: block;
}
.row:after {
  content: "";
  display: table;
  clear: both;
}

.col2, .col3, .col4, .col5, .col6, .col8, .col16 {
  background: fuchsia;
  padding: 1em;
  color: white;
}

.col2 {
  float: left;
  display: block;
  margin-right: 1.7578775415%;
  width: 10.9618571512%;
}
.col2:last-child {
  margin-right: 0;
}

.col3 {
  float: left;
  display: block;
  margin-right: 1.7578775415%;
  width: 17.3217244976%;
}
.col3:last-child {
  margin-right: 0;
}

.col4 {
  float: left;
  display: block;
  margin-right: 1.7578775415%;
  width: 23.6815918439%;
}
.col4:last-child {
  margin-right: 0;
}

.col5 {
  float: left;
  display: block;
  margin-right: 1.7578775415%;
  width: 30.0414591902%;
}
.col5:last-child {
  margin-right: 0;
}

.col6 {
  float: left;
  display: block;
  margin-right: 1.7578775415%;
  width: 36.4013265366%;
}
.col6:last-child {
  margin-right: 0;
}

.col8 {
  float: left;
  display: block;
  margin-right: 1.7578775415%;
  width: 49.1210612293%;
}
.col8:last-child {
  margin-right: 0;
}

.col16 {
  float: left;
  display: block;
  margin-right: 1.7578775415%;
  width: 100%;
}
.col16:last-child {
  margin-right: 0;
}

SassMeister-rendered.html

<div class="outer-container">
  <div class="row">
    <div class="col16">16</div>
  </div>
  <div class="row">
    <div class="col4">4</div>
    <div class="col4">4</div>
    <div class="col4">4</div>
    <div class="col4">4</div>
  </div>
  <div class="row">
    <div class="col8">8</div>
    <div class="col3">3</div>
    <div class="col5">5</div>
  </div>
</div>