Grid, Toolbox, Type -- http://www.sassmeister.com/gist/bc7368842b2ce66353f9c350671c6d46

SassMeister-input-HTML.html

<!-- First row -->
<section class="outer-container">
  <div class="grid-4">
    <div class="box">
      4 column
    </div>
  </div>
  <div class="grid-2">
    <div class="box">
      2 column
    </div>
  </div>
  <div class="grid-6">
    <div class="box">
      6 column
    </div>
  </div>
</section>

<!-- Second row -->
<section class="outer-container">
  <div class="grid-3">
    <div class="box">
      3 column
    </div>
  </div>
  <div class="grid-7">
    <div class="box">
      5 column
    </div>
  </div>
  <div class="grid-2">
    <div class="box">
      2 column
    </div>
  </div>
</section>

<!-- Third row -->
<section class="bg-accent">
  <div class="outer-container">
    <div class="grid-6">
      <div class="box">
        6 column
      </div>
    </div>
    <div class="grid-6">
      <div class="box">
        6 column
      </div>
    </div>
  </div>
</section>

SassMeister-input.scss

// ----
// Sass (v3.4.21)
// Compass (v1.0.3)
// Bourbon (v4.2.6)
// Neat (v1.6.0)
// ----

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

// *********************
// For styling purposes
// *********************
.box {
  background: aquamarine;
  margin: 1em 0;
  padding: 1em;
}
.bg-accent {
  background: purple;
}
// *********************


// ======================================
// ~Defaults 
// ======================================
* {
  box-sizing: border-box;
  outline: 0;
}
html {
  font-size: 93.75%;
}
body {
  background: #fff;
  color: #333;
  font-family: 'Helvetica Neue', sans-serif;
  line-height: 1.35;
  margin: 0;
  padding: 0;
}
h1, h2, h3, h4, h5, h6 {
  font-weight: 600;
  margin: 0;
  padding: 0;
}
h1, h2 {
  line-height: 1.1;
}
a {
  transition: all 0.1s;
  color: blue;
  text-decoration: none;
  cursor: pointer;
}
p {
  margin: 0;
}
form {
  margin: 0;
}
input {
  font-family: 'Helvetica Neue', sans-serif;
  font-size: 1em;

  &:hover {
    cursor: pointer;
  }
}
input[type=text] {
  border: 1px solid #ccc;

  &::-webkit-input-placeholder,
  &::-moz-placeholder,
  &:-ms-input-placeholder,
  &:input-placeholder {
    color: #999;
  }
}
input[type=submit] {
  border: 0;
  display: inline-block;
}
ul, ol, li {
  margin: 0;
  padding: 0;
}
// ======================================
// ~Layout 
$bp-medium: 700px;
$bp-wide: 900px;
$bp-wider: 1000px;
// ======================================
.outer-container {
  @include outer-container;
  padding-left: 1em;
  padding-right: 1em;

  @media (min-width: $max-width) {
    padding-left: 0;
    padding-right: 0;
  }
}

@for $i from 1 through 12 {
  .grid-#{$i} {
    @include media(min-width $bp-medium, 12) {
      @include span-columns($i)
    }
  }
}


.col4 {
  li {
    display: block;
    @media (min-width: $bp-wide) {
      // 2 col
      @include span-columns(6);
    }
    @media (min-width: $bp-wider) {
      // 3 col
      @include span-columns(3);
    }
  }
  // first of 2
  li:nth-child(2n+1) {
    @media (min-width: $bp-wide) and (max-width: $bp-wider) {
      clear: left;
    }
  }
  // last of 2
  li:nth-child(2n) {
    @media (min-width: $bp-wide) and (max-width: $bp-wider) {
      @include omega();
    }
  }

  // first of 3
  li:nth-child(4n+1) {
    @media (min-width: $bp-wider) {
      clear: left;
    }
  }
  // last of 4
  li:nth-child(4n) {
    @media (min-width: $bp-wider) {
      @include omega();
    }
  }
}

.col3 {
  li {
    display: block;
    @media (min-width: $bp-wide) {
      // 2 col
      @include span-columns(6);
    }
    @media (min-width: $bp-wider) {
      // 3 col
      @include span-columns(4);
    }
  }
  // first of 2
  li:nth-child(2n+1) {
    @media (min-width: $bp-wide) and (max-width: $bp-wider) {
      clear: left;
    }
  }
  // last of 2
  li:nth-child(2n) {
    @media (min-width: $bp-wide) and (max-width: $bp-wider) {
      @include omega();
    }
  }

  // first of 3
  li:nth-child(3n+1) {
    @media (min-width: $bp-wider) {
      clear: left;
    }
  }
  // last of 3
  li:nth-child(3n) {
    @media (min-width: $bp-wider) {
      @include omega();
    }
  }
}

.col2 {
  li {
    @media (min-width: $bp-wider) {
      @include span-columns(6);
      @include omega(2n);
    }
  }
}

// ======================================
// Type
// ======================================
.bold {
  font-weight: bold;
}
.emph {
  font-style: italic;
}
// Minor Third Scale 1.2
.hxl {
  font-size: 2.488rem;
}
.h1 {
  font-size: 2.074rem;
}
.h2 {
  font-size: 1.728rem;
}
.h3 {
  font-size: 1.44rem;
}
.h4 {
  font-size: 1.2rem;
}
.h {
  font-size: 1rem;
}
.hxs {
  font-size: 0.833rem;
}
.hxxs {
  font-size: 0.7rem;
}

// ~Toolbox
.hide {
  display: none;
}
.clearfix:before,
.clearfix:after {
  content: " ";
  display: table;
}
.clearfix:after {
  clear: both;
}
.clear {
  clear: both;
}
.center {
  margin: 0 auto;
}
.left {
  float: left;
}
.right {
  float: right;
}
.upper {
  text-transform: uppercase;
}
.absolute {
  position: absolute;
}
.relative {
  position: relative;
}
.inline-block {
  display: inline-block;
}
.align-center {
  text-align: center;
}
.align-right {
  text-align: right;
}

// ======================================
// ~Mixins
// ======================================
@mixin contrasted($background-color, $dark: $contrasted-dark-default, $light: $contrasted-light-default, $threshold: null) {
  @if $threshold {
    // Deprecated in Compass 0.13
    @warn "The $threshold argment to contrasted is no longer needed and will be removed in the next release.";
  }
  background-color: $background-color;
  color: contrast-color($background-color, $dark, $light);
}

@function contrast-color($color, $dark: $contrasted-dark-default, $light: $contrasted-light-default, $threshold: null) {
  @if $threshold {
    // Deprecated in Compass 0.13
    @warn "The $threshold argment to contrast-color is no longer needed and will be removed in the next release.";
  }
  @if $color == null {
    @return null;
  }
  @else {
    $color-brightness: brightness($color);
    $dark-text-brightness: brightness($dark);
    $light-text-brightness: brightness($light);
    @return if(abs($color-brightness - $light-text-brightness) > abs($color-brightness - $dark-text-brightness), $light, $dark);
  }
}

@function brightness($color) {
  @if type-of($color) == color {
    @return (red($color) * 0.299 + green($color) * 0.587 + blue($color) * 0.114) / 255 * 100%;
  }
  @else {
    @return unquote("brightness(#{$color})");
  }
}

@mixin animation($animate...) {
  $max: length($animate);
  $animations: '';

  @for $i from 1 through $max {
    $animations: #{$animations + nth($animate, $i)};

    @if $i < $max {
      $animations: #{$animations + ", "};
    }
  }
  -webkit-animation: $animations;
  -moz-animation:    $animations;
  -o-animation:      $animations;
  animation:         $animations;
}

@mixin keyframes($animationName) {
  @-webkit-keyframes #{$animationName} {
    @content;
  }
  @-moz-keyframes #{$animationName} {
    @content;
  }
  @-o-keyframes #{$animationName} {
    @content;
  }
  @keyframes #{$animationName} {
    @content;
  }
}

SassMeister-output.css

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

.box {
  background: aquamarine;
  margin: 1em 0;
  padding: 1em;
}

.bg-accent {
  background: purple;
}

* {
  box-sizing: border-box;
  outline: 0;
}

html {
  font-size: 93.75%;
}

body {
  background: #fff;
  color: #333;
  font-family: 'Helvetica Neue', sans-serif;
  line-height: 1.35;
  margin: 0;
  padding: 0;
}

h1, h2, h3, h4, h5, h6 {
  font-weight: 600;
  margin: 0;
  padding: 0;
}

h1, h2 {
  line-height: 1.1;
}

a {
  transition: all 0.1s;
  color: blue;
  text-decoration: none;
  cursor: pointer;
}

p {
  margin: 0;
}

form {
  margin: 0;
}

input {
  font-family: 'Helvetica Neue', sans-serif;
  font-size: 1em;
}
input:hover {
  cursor: pointer;
}

input[type=text] {
  border: 1px solid #ccc;
}
input[type=text]::-webkit-input-placeholder, input[type=text]::-moz-placeholder, input[type=text]:-ms-input-placeholder, input[type=text]:input-placeholder {
  color: #999;
}

input[type=submit] {
  border: 0;
  display: inline-block;
}

ul, ol, li {
  margin: 0;
  padding: 0;
}

.outer-container {
  *zoom: 1;
  max-width: 68em;
  margin-left: auto;
  margin-right: auto;
  padding-left: 1em;
  padding-right: 1em;
}
.outer-container:before, .outer-container:after {
  content: " ";
  display: table;
}
.outer-container:after {
  clear: both;
}
@media (min-width: 68em) {
  .outer-container {
    padding-left: 0;
    padding-right: 0;
  }
}

@media screen and (min-width: 700px) {
  .grid-1 {
    float: left;
    display: block;
    margin-right: 2.35765%;
    width: 6.17215%;
  }
  .grid-1:last-child {
    margin-right: 0;
  }
}

@media screen and (min-width: 700px) {
  .grid-2 {
    float: left;
    display: block;
    margin-right: 2.35765%;
    width: 14.70196%;
  }
  .grid-2:last-child {
    margin-right: 0;
  }
}

@media screen and (min-width: 700px) {
  .grid-3 {
    float: left;
    display: block;
    margin-right: 2.35765%;
    width: 23.23176%;
  }
  .grid-3:last-child {
    margin-right: 0;
  }
}

@media screen and (min-width: 700px) {
  .grid-4 {
    float: left;
    display: block;
    margin-right: 2.35765%;
    width: 31.76157%;
  }
  .grid-4:last-child {
    margin-right: 0;
  }
}

@media screen and (min-width: 700px) {
  .grid-5 {
    float: left;
    display: block;
    margin-right: 2.35765%;
    width: 40.29137%;
  }
  .grid-5:last-child {
    margin-right: 0;
  }
}

@media screen and (min-width: 700px) {
  .grid-6 {
    float: left;
    display: block;
    margin-right: 2.35765%;
    width: 48.82117%;
  }
  .grid-6:last-child {
    margin-right: 0;
  }
}

@media screen and (min-width: 700px) {
  .grid-7 {
    float: left;
    display: block;
    margin-right: 2.35765%;
    width: 57.35098%;
  }
  .grid-7:last-child {
    margin-right: 0;
  }
}

@media screen and (min-width: 700px) {
  .grid-8 {
    float: left;
    display: block;
    margin-right: 2.35765%;
    width: 65.88078%;
  }
  .grid-8:last-child {
    margin-right: 0;
  }
}

@media screen and (min-width: 700px) {
  .grid-9 {
    float: left;
    display: block;
    margin-right: 2.35765%;
    width: 74.41059%;
  }
  .grid-9:last-child {
    margin-right: 0;
  }
}

@media screen and (min-width: 700px) {
  .grid-10 {
    float: left;
    display: block;
    margin-right: 2.35765%;
    width: 82.94039%;
  }
  .grid-10:last-child {
    margin-right: 0;
  }
}

@media screen and (min-width: 700px) {
  .grid-11 {
    float: left;
    display: block;
    margin-right: 2.35765%;
    width: 91.4702%;
  }
  .grid-11:last-child {
    margin-right: 0;
  }
}

@media screen and (min-width: 700px) {
  .grid-12 {
    float: left;
    display: block;
    margin-right: 2.35765%;
    width: 100%;
  }
  .grid-12:last-child {
    margin-right: 0;
  }
}

.col4 li {
  display: block;
}
@media (min-width: 900px) {
  .col4 li {
    float: left;
    display: block;
    margin-right: 2.35765%;
    width: 48.82117%;
  }
  .col4 li:last-child {
    margin-right: 0;
  }
}
@media (min-width: 1000px) {
  .col4 li {
    float: left;
    display: block;
    margin-right: 2.35765%;
    width: 23.23176%;
  }
  .col4 li:last-child {
    margin-right: 0;
  }
}
@media (min-width: 900px) and (max-width: 1000px) {
  .col4 li:nth-child(2n+1) {
    clear: left;
  }
}
@media (min-width: 900px) and (max-width: 1000px) {
  .col4 li:nth-child(2n) {
    margin-right: 0;
  }
}
@media (min-width: 1000px) {
  .col4 li:nth-child(4n+1) {
    clear: left;
  }
}
@media (min-width: 1000px) {
  .col4 li:nth-child(4n) {
    margin-right: 0;
  }
}

.col3 li {
  display: block;
}
@media (min-width: 900px) {
  .col3 li {
    float: left;
    display: block;
    margin-right: 2.35765%;
    width: 48.82117%;
  }
  .col3 li:last-child {
    margin-right: 0;
  }
}
@media (min-width: 1000px) {
  .col3 li {
    float: left;
    display: block;
    margin-right: 2.35765%;
    width: 31.76157%;
  }
  .col3 li:last-child {
    margin-right: 0;
  }
}
@media (min-width: 900px) and (max-width: 1000px) {
  .col3 li:nth-child(2n+1) {
    clear: left;
  }
}
@media (min-width: 900px) and (max-width: 1000px) {
  .col3 li:nth-child(2n) {
    margin-right: 0;
  }
}
@media (min-width: 1000px) {
  .col3 li:nth-child(3n+1) {
    clear: left;
  }
}
@media (min-width: 1000px) {
  .col3 li:nth-child(3n) {
    margin-right: 0;
  }
}

@media (min-width: 1000px) {
  .col2 li {
    float: left;
    display: block;
    margin-right: 2.35765%;
    width: 48.82117%;
  }
  .col2 li:last-child {
    margin-right: 0;
  }
  .col2 li:nth-child(2n) {
    margin-right: 0;
  }
  .col2 li:nth-child(2n+1) {
    clear: left;
  }
}

.bold {
  font-weight: bold;
}

.emph {
  font-style: italic;
}

.hxl {
  font-size: 2.488rem;
}

.h1 {
  font-size: 2.074rem;
}

.h2 {
  font-size: 1.728rem;
}

.h3 {
  font-size: 1.44rem;
}

.h4 {
  font-size: 1.2rem;
}

.h {
  font-size: 1rem;
}

.hxs {
  font-size: 0.833rem;
}

.hxxs {
  font-size: 0.7rem;
}

.hide {
  display: none;
}

.clearfix:before,
.clearfix:after {
  content: " ";
  display: table;
}

.clearfix:after {
  clear: both;
}

.clear {
  clear: both;
}

.center {
  margin: 0 auto;
}

.left {
  float: left;
}

.right {
  float: right;
}

.upper {
  text-transform: uppercase;
}

.absolute {
  position: absolute;
}

.relative {
  position: relative;
}

.inline-block {
  display: inline-block;
}

.align-center {
  text-align: center;
}

.align-right {
  text-align: right;
}

SassMeister-rendered.html

<!-- First row -->
<section class="outer-container">
  <div class="grid-4">
    <div class="box">
      4 column
    </div>
  </div>
  <div class="grid-2">
    <div class="box">
      2 column
    </div>
  </div>
  <div class="grid-6">
    <div class="box">
      6 column
    </div>
  </div>
</section>

<!-- Second row -->
<section class="outer-container">
  <div class="grid-3">
    <div class="box">
      3 column
    </div>
  </div>
  <div class="grid-7">
    <div class="box">
      5 column
    </div>
  </div>
  <div class="grid-2">
    <div class="box">
      2 column
    </div>
  </div>
</section>

<!-- Third row -->
<section class="bg-accent">
  <div class="outer-container">
    <div class="grid-6">
      <div class="box">
        6 column
      </div>
    </div>
    <div class="grid-6">
      <div class="box">
        6 column
      </div>
    </div>
  </div>
</section>