Generated by SassMeister.com.

SassMeister-input-HTML.haml

#container
  #navigation
  #main
    #subcolumn-1
    #subcolumn-2
  #aside
    %div Some test content
    .box Some test content

SassMeister-input.scss

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

@import "bourbon/bourbon";

$column: 50px;
$gutter: 10px;
$grid-columns: 16;
$max-width: em(1088);
$visual-grid: true;

@import "neat/neat";

body {
  margin: 0;
  padding: 0;
}

#navigation, #main, #aside {
  height: 200px;
}
#subcolumn-1, #subcolumn-2 {
  height: 100px;
}

#container {
  @include outer-container;
}

#navigation {
  background-color: red;
  @include span-columns(3);
}

#main {
  background-color: blue;
  @include span-columns(9);
}

#subcolumn-1 {
  background-color: purple;
  @include span-columns(5 of 9);
}

#subcolumn-2 {
  background-color: green;
  @include span-columns(4 of 9);
}

#aside {
  background-color: yellow;
  @include span-columns(4);
}

.box {
  background-color: gold;
  padding: $gutter;
  margin-left: $gutter * -1;
  margin-right: $gutter * -1;
}

SassMeister-output.css

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

body:before {
  content: '';
  display: inline-block;
  background-image: deprecated-webkit-gradient(linear, left top, left bottom, transparent 0, #eeeeee 0, #eeeeee 5.26316%, transparent 5.26316%, transparent 6.31579%, #eeeeee 6.31579%, #eeeeee 11.57895%, transparent 11.57895%, transparent 12.63158%, #eeeeee 12.63158%, #eeeeee 17.89474%, transparent 17.89474%, transparent 18.94737%, #eeeeee 18.94737%, #eeeeee 24.21053%, transparent 24.21053%, transparent 25.26316%, #eeeeee 25.26316%, #eeeeee 30.52632%, transparent 30.52632%, transparent 31.57895%, #eeeeee 31.57895%, #eeeeee 36.84211%, transparent 36.84211%, transparent 37.89474%, #eeeeee 37.89474%, #eeeeee 43.15789%, transparent 43.15789%, transparent 44.21053%, #eeeeee 44.21053%, #eeeeee 49.47368%, transparent 49.47368%, transparent 50.52632%, #eeeeee 50.52632%, #eeeeee 55.78947%, transparent 55.78947%, transparent 56.84211%, #eeeeee 56.84211%, #eeeeee 62.10526%, transparent 62.10526%, transparent 63.15789%, #eeeeee 63.15789%, #eeeeee 68.42105%, transparent 68.42105%, transparent 69.47368%, #eeeeee 69.47368%, #eeeeee 74.73684%, transparent 74.73684%, transparent 75.78947%, #eeeeee 75.78947%, #eeeeee 81.05263%, transparent 81.05263%, transparent 82.10526%, #eeeeee 82.10526%, #eeeeee 87.36842%, transparent 87.36842%, transparent 88.42105%, #eeeeee 88.42105%, #eeeeee 93.68421%, transparent 93.68421%, transparent 94.73684%, #eeeeee 94.73684%, #eeeeee 100.0%, transparent 100.0%);
  background-image: -webkit-linear-gradient(left, transparent 0, #eeeeee 0, #eeeeee 5.26316%, transparent 5.26316%, transparent 6.31579%, #eeeeee 6.31579%, #eeeeee 11.57895%, transparent 11.57895%, transparent 12.63158%, #eeeeee 12.63158%, #eeeeee 17.89474%, transparent 17.89474%, transparent 18.94737%, #eeeeee 18.94737%, #eeeeee 24.21053%, transparent 24.21053%, transparent 25.26316%, #eeeeee 25.26316%, #eeeeee 30.52632%, transparent 30.52632%, transparent 31.57895%, #eeeeee 31.57895%, #eeeeee 36.84211%, transparent 36.84211%, transparent 37.89474%, #eeeeee 37.89474%, #eeeeee 43.15789%, transparent 43.15789%, transparent 44.21053%, #eeeeee 44.21053%, #eeeeee 49.47368%, transparent 49.47368%, transparent 50.52632%, #eeeeee 50.52632%, #eeeeee 55.78947%, transparent 55.78947%, transparent 56.84211%, #eeeeee 56.84211%, #eeeeee 62.10526%, transparent 62.10526%, transparent 63.15789%, #eeeeee 63.15789%, #eeeeee 68.42105%, transparent 68.42105%, transparent 69.47368%, #eeeeee 69.47368%, #eeeeee 74.73684%, transparent 74.73684%, transparent 75.78947%, #eeeeee 75.78947%, #eeeeee 81.05263%, transparent 81.05263%, transparent 82.10526%, #eeeeee 82.10526%, #eeeeee 87.36842%, transparent 87.36842%, transparent 88.42105%, #eeeeee 88.42105%, #eeeeee 93.68421%, transparent 93.68421%, transparent 94.73684%, #eeeeee 94.73684%, #eeeeee 100.0%, transparent 100.0%);
  background-image: -moz-linear-gradient(left, transparent 0, #eeeeee 0, #eeeeee 5.26316%, transparent 5.26316%, transparent 6.31579%, #eeeeee 6.31579%, #eeeeee 11.57895%, transparent 11.57895%, transparent 12.63158%, #eeeeee 12.63158%, #eeeeee 17.89474%, transparent 17.89474%, transparent 18.94737%, #eeeeee 18.94737%, #eeeeee 24.21053%, transparent 24.21053%, transparent 25.26316%, #eeeeee 25.26316%, #eeeeee 30.52632%, transparent 30.52632%, transparent 31.57895%, #eeeeee 31.57895%, #eeeeee 36.84211%, transparent 36.84211%, transparent 37.89474%, #eeeeee 37.89474%, #eeeeee 43.15789%, transparent 43.15789%, transparent 44.21053%, #eeeeee 44.21053%, #eeeeee 49.47368%, transparent 49.47368%, transparent 50.52632%, #eeeeee 50.52632%, #eeeeee 55.78947%, transparent 55.78947%, transparent 56.84211%, #eeeeee 56.84211%, #eeeeee 62.10526%, transparent 62.10526%, transparent 63.15789%, #eeeeee 63.15789%, #eeeeee 68.42105%, transparent 68.42105%, transparent 69.47368%, #eeeeee 69.47368%, #eeeeee 74.73684%, transparent 74.73684%, transparent 75.78947%, #eeeeee 75.78947%, #eeeeee 81.05263%, transparent 81.05263%, transparent 82.10526%, #eeeeee 82.10526%, #eeeeee 87.36842%, transparent 87.36842%, transparent 88.42105%, #eeeeee 88.42105%, #eeeeee 93.68421%, transparent 93.68421%, transparent 94.73684%, #eeeeee 94.73684%, #eeeeee 100.0%, transparent 100.0%);
  background-image: -ms-linear-gradient(left, transparent 0, #eeeeee 0, #eeeeee 5.26316%, transparent 5.26316%, transparent 6.31579%, #eeeeee 6.31579%, #eeeeee 11.57895%, transparent 11.57895%, transparent 12.63158%, #eeeeee 12.63158%, #eeeeee 17.89474%, transparent 17.89474%, transparent 18.94737%, #eeeeee 18.94737%, #eeeeee 24.21053%, transparent 24.21053%, transparent 25.26316%, #eeeeee 25.26316%, #eeeeee 30.52632%, transparent 30.52632%, transparent 31.57895%, #eeeeee 31.57895%, #eeeeee 36.84211%, transparent 36.84211%, transparent 37.89474%, #eeeeee 37.89474%, #eeeeee 43.15789%, transparent 43.15789%, transparent 44.21053%, #eeeeee 44.21053%, #eeeeee 49.47368%, transparent 49.47368%, transparent 50.52632%, #eeeeee 50.52632%, #eeeeee 55.78947%, transparent 55.78947%, transparent 56.84211%, #eeeeee 56.84211%, #eeeeee 62.10526%, transparent 62.10526%, transparent 63.15789%, #eeeeee 63.15789%, #eeeeee 68.42105%, transparent 68.42105%, transparent 69.47368%, #eeeeee 69.47368%, #eeeeee 74.73684%, transparent 74.73684%, transparent 75.78947%, #eeeeee 75.78947%, #eeeeee 81.05263%, transparent 81.05263%, transparent 82.10526%, #eeeeee 82.10526%, #eeeeee 87.36842%, transparent 87.36842%, transparent 88.42105%, #eeeeee 88.42105%, #eeeeee 93.68421%, transparent 93.68421%, transparent 94.73684%, #eeeeee 94.73684%, #eeeeee 100.0%, transparent 100.0%);
  background-image: -o-linear-gradient(left, transparent 0, #eeeeee 0, #eeeeee 5.26316%, transparent 5.26316%, transparent 6.31579%, #eeeeee 6.31579%, #eeeeee 11.57895%, transparent 11.57895%, transparent 12.63158%, #eeeeee 12.63158%, #eeeeee 17.89474%, transparent 17.89474%, transparent 18.94737%, #eeeeee 18.94737%, #eeeeee 24.21053%, transparent 24.21053%, transparent 25.26316%, #eeeeee 25.26316%, #eeeeee 30.52632%, transparent 30.52632%, transparent 31.57895%, #eeeeee 31.57895%, #eeeeee 36.84211%, transparent 36.84211%, transparent 37.89474%, #eeeeee 37.89474%, #eeeeee 43.15789%, transparent 43.15789%, transparent 44.21053%, #eeeeee 44.21053%, #eeeeee 49.47368%, transparent 49.47368%, transparent 50.52632%, #eeeeee 50.52632%, #eeeeee 55.78947%, transparent 55.78947%, transparent 56.84211%, #eeeeee 56.84211%, #eeeeee 62.10526%, transparent 62.10526%, transparent 63.15789%, #eeeeee 63.15789%, #eeeeee 68.42105%, transparent 68.42105%, transparent 69.47368%, #eeeeee 69.47368%, #eeeeee 74.73684%, transparent 74.73684%, transparent 75.78947%, #eeeeee 75.78947%, #eeeeee 81.05263%, transparent 81.05263%, transparent 82.10526%, #eeeeee 82.10526%, #eeeeee 87.36842%, transparent 87.36842%, transparent 88.42105%, #eeeeee 88.42105%, #eeeeee 93.68421%, transparent 93.68421%, transparent 94.73684%, #eeeeee 94.73684%, #eeeeee 100.0%, transparent 100.0%);
  background-image: linear-gradient(left, transparent 0, #eeeeee 0, #eeeeee 5.26316%, transparent 5.26316%, transparent 6.31579%, #eeeeee 6.31579%, #eeeeee 11.57895%, transparent 11.57895%, transparent 12.63158%, #eeeeee 12.63158%, #eeeeee 17.89474%, transparent 17.89474%, transparent 18.94737%, #eeeeee 18.94737%, #eeeeee 24.21053%, transparent 24.21053%, transparent 25.26316%, #eeeeee 25.26316%, #eeeeee 30.52632%, transparent 30.52632%, transparent 31.57895%, #eeeeee 31.57895%, #eeeeee 36.84211%, transparent 36.84211%, transparent 37.89474%, #eeeeee 37.89474%, #eeeeee 43.15789%, transparent 43.15789%, transparent 44.21053%, #eeeeee 44.21053%, #eeeeee 49.47368%, transparent 49.47368%, transparent 50.52632%, #eeeeee 50.52632%, #eeeeee 55.78947%, transparent 55.78947%, transparent 56.84211%, #eeeeee 56.84211%, #eeeeee 62.10526%, transparent 62.10526%, transparent 63.15789%, #eeeeee 63.15789%, #eeeeee 68.42105%, transparent 68.42105%, transparent 69.47368%, #eeeeee 69.47368%, #eeeeee 74.73684%, transparent 74.73684%, transparent 75.78947%, #eeeeee 75.78947%, #eeeeee 81.05263%, transparent 81.05263%, transparent 82.10526%, #eeeeee 82.10526%, #eeeeee 87.36842%, transparent 87.36842%, transparent 88.42105%, #eeeeee 88.42105%, #eeeeee 93.68421%, transparent 93.68421%, transparent 94.73684%, #eeeeee 94.73684%, #eeeeee 100.0%, transparent 100.0%);
  height: 100%;
  left: 0;
  margin: 0 auto;
  max-width: 68em;
  opacity: 0.4;
  position: fixed;
  right: 0;
  width: 100%;
  pointer-events: none;
  z-index: -1;
}

body {
  margin: 0;
  padding: 0;
}

#navigation, #main, #aside {
  height: 200px;
}

#subcolumn-1, #subcolumn-2 {
  height: 100px;
}

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

#navigation {
  background-color: red;
  float: left;
  display: block;
  margin-right: 1.05263%;
  width: 17.89474%;
}
#navigation:last-child {
  margin-right: 0;
}

#main {
  background-color: blue;
  float: left;
  display: block;
  margin-right: 1.05263%;
  width: 55.78947%;
}
#main:last-child {
  margin-right: 0;
}

#subcolumn-1 {
  background-color: purple;
  float: left;
  display: block;
  margin-right: 1.88679%;
  width: 54.71698%;
}
#subcolumn-1:last-child {
  margin-right: 0;
}

#subcolumn-2 {
  background-color: green;
  float: left;
  display: block;
  margin-right: 1.88679%;
  width: 43.39623%;
}
#subcolumn-2:last-child {
  margin-right: 0;
}

#aside {
  background-color: yellow;
  float: left;
  display: block;
  margin-right: 1.05263%;
  width: 24.21053%;
}
#aside:last-child {
  margin-right: 0;
}

.box {
  background-color: gold;
  padding: 10px;
  margin-left: -10px;
  margin-right: -10px;
}

SassMeister-rendered.html

<div id='container'>
  <div id='navigation'></div>
  <div id='main'>
    <div id='subcolumn-1'></div>
    <div id='subcolumn-2'></div>
  </div>
  <div id='aside'>
    <div>Some test content</div>
    <div class='box'>Some test content</div>
  </div>
</div>