Generated by SassMeister.com.

SassMeister-input-HTML.html

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

<section>Section</section>
<section>Section</section>
<section>Section</section>
<section>Section</section>
<section>Section</section>
<section>Section</section>

<footer>footer</footer>

SassMeister-input.scss

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

@import "susy";
@include border-box-sizing;
$susy: (
  columns: 12,
  gutter: 1/4,
  gutter-position: inside-static
);
// body{@include container(show);}
header{ @include full;}
nav { @include full; }
article { @include span(4); }
section { @include span(2);}
footer {@include span(full); }

header, nav, article, footer {
  padding: 1em;
  background: rgba(122,211,122,.5);
  border: 1px solid pink;
}

SassMeister-output.css

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

header {
  clear: both;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  width: 100%;
  float: left;
  padding-left: 0.8333333333%;
  padding-right: 0.8333333333%;
}

nav {
  clear: both;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  width: 100%;
  float: left;
  padding-left: 0.8333333333%;
  padding-right: 0.8333333333%;
}

article {
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  width: 33.3333333333%;
  float: left;
  padding-left: 0.8333333333%;
  padding-right: 0.8333333333%;
}

section {
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  width: 16.6666666667%;
  float: left;
  padding-left: 0.8333333333%;
  padding-right: 0.8333333333%;
}

footer {
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  width: 100%;
  float: left;
  padding-left: 0.8333333333%;
  padding-right: 0.8333333333%;
}

header, nav, article, footer {
  padding: 1em;
  background: rgba(122, 211, 122, 0.5);
  border: 1px solid pink;
}

SassMeister-rendered.html

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

<section>Section</section>
<section>Section</section>
<section>Section</section>
<section>Section</section>
<section>Section</section>
<section>Section</section>

<footer>footer</footer>