Generated by SassMeister.com.

SassMeister-input-HTML.html

<header>Header</header>
<nav>Navigation</nav>
<article>Article
  <div>Box-1</div>
  <div>Box-2</div>
  <div>Box-3</div>
  <div>Box-4</div>
  
</article>
<footer>Footer</footer>

SassMeister-input.scss

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

@import "compass";
@import "breakpoint";
@import "susy";
@include border-box-sizing;

$base-line-height: 30px;
$susy:(
  columns:12,
  gutters: 1/4,
  column-width:4em,
  gutter-position:inside
);
  

header{
  @include span(10);
}
nav {
  @include span(last 2);
}
article, footer{
  @include full;
}

html{
  background: white;
}
nav, header, article, footer {
  padding-top: 1em;
  padding-bottom: 1em;
  background: linear-gradient(rgba(orange,.125), rgba(orange,.125)), rgba(orange, .25);
  background-clip: content-box, border-box;
  box-shadow: inset 0 0 0 1px rgba(orange, .9);
}

SassMeister-output.css

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

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

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

article, footer {
  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%;
}

html {
  background: white;
}

nav, header, article, footer {
  padding-top: 1em;
  padding-bottom: 1em;
  background: linear-gradient(rgba(255, 165, 0, 0.125), rgba(255, 165, 0, 0.125)), rgba(255, 165, 0, 0.25);
  background-clip: content-box, border-box;
  box-shadow: inset 0 0 0 1px rgba(255, 165, 0, 0.9);
}

SassMeister-rendered.html

<header>Header</header>
<nav>Navigation</nav>
<article>Article
  <div>Box-1</div>
  <div>Box-2</div>
  <div>Box-3</div>
  <div>Box-4</div>
  
</article>
<footer>Footer</footer>