Generated by SassMeister.com.

SassMeister-input-HTML.haml

#container.layout-3-col
  %header#header
    %code #container > #header
  %nav#navigation
    %code #container > #navigation
    %ul#list
      %li List 1
      %li List 2
      %li List 3
    %p The Scarecrow sat upon the Lion's back, and the big beast walked to the edge of the gulf and crouched down. "Why don't you run and jump?" asked the Scarecrow. "Because that isn't the way we Lions do these things," he replied. Then giving a great spring, he shot through
  %header#main-header
    %code #container > #main-header
    %p Removing the fire-board from the front of the try-works, the bare masonry of that side is exposed, penetrated by the two iron mouths of the furnaces, directly underneath the pots.
  #main
    %code #container > #main
    %p A short space elapsed, and up into this noiselessness came Ahab alone from his cabin. Taking a few turns on the quarter-deck, he paused to gaze over the side, then slowly getting into the main-chains he took Stubb's long spade—still remaining there after the whale's Decapitation—and striking it into the lower part of the half-suspended mass, placed its other end crutch-wise under one arm, and so stood leaning over with eyes attentively fixed on this head.
    %p It was a black and hooded head; and hanging there in the midst of so intense a calm, it seemed the Sphynx's in the desert. "Speak, thou vast and venerable head," muttered Ahab, "which, though ungarnished with a beard, yet here and there lookest hoary with mosses; speak, mighty head, and tell us the secret thing that is in thee. Of all divers, thou hast dived the deepest. That head upon which the upper sun now gleams, has moved amid this world's foundations. Where unrecorded names and navies rust, and untold hopes and anchors rot; where in her murderous hold this frigate earth is ballasted with bones of millions of the drowned; there, in that awful water-land, there was thy most familiar home. Thou hast been where bell or diver never went; hast slept by many a sailor's side, where sleepless mothers would give their lives to lay them down. Thou saw'st the locked lovers when leaping from their flaming ship; heart to heart they sank beneath the exulting wave; true to each other, when heaven seemed false to them. Thou saw'st the murdered mate when tossed by pirates from the midnight deck; for hours he fell into the deeper midnight of the insatiate maw; and his murderers still sailed on unharmed—while swift lightnings shivered the neighboring ship that would have borne a righteous husband to outstretched, longing arms. O head! thou hast seen enough to split the planets and make an infidel of Abraham, and not one syllable is thine!"
  %aside#aside
    %code #container > #aside
    %p "Consider that I've said nothing," said Fix; "and let us drink." "Yes; let us drink!" Passepartout felt himself yielding more and more to the effects of the liquor.  Fix, seeing that he must, at all hazards, be separated from his master, wished to entirely overcome him.  Some pipes full of opium lay upon the table.  Fix slipped one into Passepartout's hand.  He took it, put it between his lips, lit it, drew several puffs, and his head, becoming heavy under the influence of the narcotic, fell upon the table. "At last!" said Fix, seeing Passepartout unconscious.

#footer-wrapper
  %footer#footer-container
    %code #footer-wrapper > #footer-container

SassMeister-input.scss

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

@import "susy";

// Actual grid

$susy: (
  columns: 16,
  column-width: 50px,
  gutters: 10px/50px,
  math: static,
  debug: (
    image: show,
    output: overlay,
  ),
);

$border-color: #c7c7c7;
$header-border-color: #e6e6e6;
$footer-height: 50px;

html, body {
  min-height: 100%;
  margin: 0;
  padding: 0;
  /*background: hsla(217, 100%, 37%, 0.08);*/
}

#container {
  @include container;
  min-height: 100%;
  margin-bottom: $footer-height + 50px;
}

body, #header, #navigation, #main-header, #main,
#aside, #footer-wrapper, #footer-container {
  background: white;
}

#header {
  @include span(16);
  /*background: hsla(210, 100%, 40%, 0.05);*/
}

#navigation {
  @include span(3);
  @include isolate();
  @include break;
  /*background: hsla(158, 100%, 40%, 0.3);*/
}

#main-header {
  @include span(13 border-box last);
  @include push(3);
  padding: 0  gutter();
  border: {
    left: 1px solid $border-color;
    top: 1px solid $border-color;
    bottom: 1px solid $header-border-color;
  };
  /*background: hsla(55, 100%, 40%, 0.1);*/
}

#main {
  padding: 0 gutter();
  border: {
    left: 1px solid $border-color;
    bottom: 1px solid $border-color;
    right: 1px solid $border-color;
  };
  /*background: hsla(15, 100%, 40%, 0.05);*/
}

.layout-3-col {
  #main {
    @include span(9 border-box);
    @include push(3);
  }
  
  #aside {
    @include span(4 last);
    /*background: hsla(307, 100%, 40%, 0.15);*/
  }
}

.layout-2-col {
  #main {
    @include span(13 border-box last);
    @include push(3);
  }
  
  #aside {
    display: none;
  }
}

.layout-1-col {
  #main {
    @include span(16 last);
    padding: 0;
    border: none;
  }
  
  #navigation, #main-header, #aside {
    display: none;
  }
}

#footer-wrapper {
  height: $footer-height;
  margin: {
    top: -1 * $footer-height;
    bottom: 0px;
  }
  /*background: hsla(192, 100%, 30%, 0.3);*/
}

#footer-container {
  @include container;
  height: 100%;
  /*background: hsla(54, 100%, 30%, 0.3);*/
}

// Styleguide

#header, #navigation, #main-header,
#main, #aside {
  min-height: 60px;
}

code {
  border: 1px solid #ddd;
  border-radius: 3px;
  background-color: #f8f8f8;
  margin: 0;
  padding: 0;
  line-height: 3em;
}

#list {
  list-style: none;
  padding: 0;
  margin: 0;
  li {
    background-color: hsla(211, 100%, 30%, 0.3);
    @include bleed-x(0 gutter());
  }
}

SassMeister-output.css

html, body {
  min-height: 100%;
  margin: 0;
  padding: 0;
  /*background: hsla(217, 100%, 37%, 0.08);*/
}

#container {
  width: 950px;
  margin-left: auto;
  margin-right: auto;
  min-height: 100%;
  margin-bottom: 100px;
}
#container::after {
  content: " ";
  display: block;
  clear: both;
}
head {
  display: block;
  position: fixed;
  right: 10px;
  top: 10px;
  z-index: 999;
  color: #333;
  background: rgba(255, 255, 255, 0.25);
}
head::before {
  content: "|||";
  display: block;
  padding: 5px 10px;
  font-family: sans-serif;
  font-size: 16px;
  font-weight: bold;
}
head:hover {
  background: rgba(255, 255, 255, 0.5);
  color: red;
}
head:hover ~ #container, head:hover ~ body #container {
  position: relative;
}
head:hover ~ #container::before, head:hover ~ body #container::before {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  content: " ";
  z-index: 998;
  background-image: linear-gradient(to right, rgba(102, 102, 255, 0.25), rgba(179, 179, 255, 0.25) 83.33333%, transparent 83.33333%);
  background-size: 60px;
  background-origin: content-box;
  background-clip: content-box;
  background-position: left top;
}

body, #header, #navigation, #main-header, #main,
#aside, #footer-wrapper, #footer-container {
  background: white;
}

#header {
  width: 950px;
  float: left;
  /*background: hsla(210, 100%, 40%, 0.05);*/
}

#navigation {
  width: 170px;
  float: left;
  margin-right: 10px;
  float: left;
  margin-left: 0;
  margin-right: -100%;
  clear: both;
  /*background: hsla(158, 100%, 40%, 0.3);*/
}

#main-header {
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  width: 770px;
  float: right;
  margin-left: 180px;
  padding: 0 10px;
  border-left: 1px solid #c7c7c7;
  border-top: 1px solid #c7c7c7;
  border-bottom: 1px solid #e6e6e6;
  /*background: hsla(55, 100%, 40%, 0.1);*/
}

#main {
  padding: 0 10px;
  border-left: 1px solid #c7c7c7;
  border-bottom: 1px solid #c7c7c7;
  border-right: 1px solid #c7c7c7;
  /*background: hsla(15, 100%, 40%, 0.05);*/
}

.layout-3-col #main {
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  width: 530px;
  float: left;
  margin-right: 10px;
  margin-left: 180px;
}
.layout-3-col #aside {
  width: 230.0px;
  float: right;
  /*background: hsla(307, 100%, 40%, 0.15);*/
}

.layout-2-col #main {
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  width: 770px;
  float: right;
  margin-left: 180px;
}
.layout-2-col #aside {
  display: none;
}

.layout-1-col #main {
  width: 950px;
  float: right;
  padding: 0;
  border: none;
}
.layout-1-col #navigation, .layout-1-col #main-header, .layout-1-col #aside {
  display: none;
}

#footer-wrapper {
  height: 50px;
  margin-top: -50px;
  margin-bottom: 0px;
  /*background: hsla(192, 100%, 30%, 0.3);*/
}

#footer-container {
  width: 950px;
  margin-left: auto;
  margin-right: auto;
  height: 100%;
  /*background: hsla(54, 100%, 30%, 0.3);*/
}
#footer-container::after {
  content: " ";
  display: block;
  clear: both;
}
head:hover ~ #footer-container, head:hover ~ body #footer-container {
  position: relative;
}
head:hover ~ #footer-container::before, head:hover ~ body #footer-container::before {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  content: " ";
  z-index: 998;
  background-image: linear-gradient(to right, rgba(102, 102, 255, 0.25), rgba(179, 179, 255, 0.25) 83.33333%, transparent 83.33333%);
  background-size: 60px;
  background-origin: content-box;
  background-clip: content-box;
  background-position: left top;
}

#header, #navigation, #main-header,
#main, #aside {
  min-height: 60px;
}

code {
  border: 1px solid #ddd;
  border-radius: 3px;
  background-color: #f8f8f8;
  margin: 0;
  padding: 0;
  line-height: 3em;
}

#list {
  list-style: none;
  padding: 0;
  margin: 0;
}
#list li {
  background-color: rgba(0, 74, 153, 0.3);
  margin-right: -10px;
  padding-right: 10px;
}

SassMeister-rendered.html

<div class='layout-3-col' id='container'>
  <header id='header'>
    <code>#container > #header</code>
  </header>
  <nav id='navigation'>
    <code>#container > #navigation</code>
    <ul id='list'>
      <li>List 1</li>
      <li>List 2</li>
      <li>List 3</li>
    </ul>
    <p>The Scarecrow sat upon the Lion's back, and the big beast walked to the edge of the gulf and crouched down. "Why don't you run and jump?" asked the Scarecrow. "Because that isn't the way we Lions do these things," he replied. Then giving a great spring, he shot through</p>
  </nav>
  <header id='main-header'>
    <code>#container > #main-header</code>
    <p>Removing the fire-board from the front of the try-works, the bare masonry of that side is exposed, penetrated by the two iron mouths of the furnaces, directly underneath the pots.</p>
  </header>
  <div id='main'>
    <code>#container > #main</code>
    <p>A short space elapsed, and up into this noiselessness came Ahab alone from his cabin. Taking a few turns on the quarter-deck, he paused to gaze over the side, then slowly getting into the main-chains he took Stubb's long spade&mdash;still remaining there after the whale's Decapitation&mdash;and striking it into the lower part of the half-suspended mass, placed its other end crutch-wise under one arm, and so stood leaning over with eyes attentively fixed on this head.</p>
    <p>It was a black and hooded head; and hanging there in the midst of so intense a calm, it seemed the Sphynx's in the desert. "Speak, thou vast and venerable head," muttered Ahab, "which, though ungarnished with a beard, yet here and there lookest hoary with mosses; speak, mighty head, and tell us the secret thing that is in thee. Of all divers, thou hast dived the deepest. That head upon which the upper sun now gleams, has moved amid this world's foundations. Where unrecorded names and navies rust, and untold hopes and anchors rot; where in her murderous hold this frigate earth is ballasted with bones of millions of the drowned; there, in that awful water-land, there was thy most familiar home. Thou hast been where bell or diver never went; hast slept by many a sailor's side, where sleepless mothers would give their lives to lay them down. Thou saw'st the locked lovers when leaping from their flaming ship; heart to heart they sank beneath the exulting wave; true to each other, when heaven seemed false to them. Thou saw'st the murdered mate when tossed by pirates from the midnight deck; for hours he fell into the deeper midnight of the insatiate maw; and his murderers still sailed on unharmed&mdash;while swift lightnings shivered the neighboring ship that would have borne a righteous husband to outstretched, longing arms. O head! thou hast seen enough to split the planets and make an infidel of Abraham, and not one syllable is thine!"</p>
  </div>
  <aside id='aside'>
    <code>#container > #aside</code>
    <p>"Consider that I've said nothing," said Fix; "and let us drink." "Yes; let us drink!" Passepartout felt himself yielding more and more to the effects of the liquor.  Fix, seeing that he must, at all hazards, be separated from his master, wished to entirely overcome him.  Some pipes full of opium lay upon the table.  Fix slipped one into Passepartout's hand.  He took it, put it between his lips, lit it, drew several puffs, and his head, becoming heavy under the influence of the narcotic, fell upon the table. "At last!" said Fix, seeing Passepartout unconscious.</p>
  </aside>
</div>
<div id='footer-wrapper'>
  <footer id='footer-container'>
    <code>#footer-wrapper > #footer-container</code>
  </footer>
</div>