Generated by SassMeister.com.

SassMeister-input-HTML.html

<header>Header</header>
<nav>Navigation</nav>
<article>Article</article>
<footer>Footer</footer>

SassMeister-input.scss

// ----
// Sass (v3.3.7)
// Compass (v1.0.0.alpha.18)
// Breakpoint (v2.4.2)
// Susy (v2.1.2)
// ----

@import "breakpoint";
@import "susy";

@include border-box-sizing;

$susy: (
  columns: 12, 
  gutter: 1 / 4, 
  column-width: 4em, 
  gutter-position: before
);

html {
  background:#ffffff;
  color:#222222;
}

body {
  font-family: "Segoe UI", Tahoma, sans-serif;
  font-size: 16px;
  @include container(show-baseline);
  @include susy-breakpoint(40em, 12) {
    @include container();
  }
}

header {
  @include push(3);
  background: #2c3133;
  color: #cccccc;
}

nav {
  @include span(first 3);
  background: rgb(170, 171, 173);
  color: rgb(45, 49, 53);
}

article {
  @include span(last 9);
  background: #cfcfcf;
}

footer {
  @include full;
  background: #5f5f5f;
  color: #cccccc;
}

SassMeister-output.css

*, *:before, *:after {
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}

html {
  background: #ffffff;
  color: #222222;
}

body {
  font-family: "Segoe UI", Tahoma, sans-serif;
  font-size: 16px;
  max-width: 59em;
  margin-left: auto;
  margin-right: auto;
}
body:after {
  content: " ";
  display: block;
  clear: both;
}
@media (min-width: 40em) {
  body {
    max-width: 59em;
    margin-left: auto;
    margin-right: auto;
  }
  body:after {
    content: " ";
    display: block;
    clear: both;
  }
}

header {
  margin-left: 25.42373%;
  background: #2c3133;
  color: #cccccc;
}

nav {
  width: 23.72881%;
  float: left;
  margin-left: 0;
  background: #aaabad;
  color: #2d3135;
}

article {
  width: 74.57627%;
  float: right;
  margin-left: 1.69492%;
  background: #cfcfcf;
}

footer {
  clear: both;
  width: 100%;
  float: left;
  margin-left: 0;
  margin-right: 0;
  background: #5f5f5f;
  color: #cccccc;
}

SassMeister-rendered.html

<header>Header</header>
<nav>Navigation</nav>
<article>Article</article>
<footer>Footer</footer>