Generated by SassMeister.com.

SassMeister-input-HTML.html

 <div class="wrapper">
      <header>
     <h1>Header</h1>
  </header>
  
  <nav>
      <p>Nav.</p>
  </nav>
  
  <aside>
      <h2>Should be renamed Abu Dhabi FC for next season.</h2>
  </aside>
  
  <footer>
      <h3>This is the footer</h3>
  </footer>
</div>

SassMeister-input.scss

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

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

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

    .wrapper { @include container(show); }
    header { @include full; }
    nav { @include span(first 3); }
    aside { @include span (last 2); }
    footer { @include full; }


    header, nav, aside , footer { background: lightblue; border: 1px solid; opacity: .8;}

SassMeister-output.css

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

.wrapper {
  max-width: 60em;
  margin-left: auto;
  margin-right: auto;
  background-image: linear-gradient(to right, rgba(102, 102, 255, 0.25), rgba(179, 179, 255, 0.25));
  background-size: 8.33333%;
  background-origin: content-box;
  background-clip: content-box;
  background-position: left top;
}
.wrapper:after {
  content: " ";
  display: block;
  clear: both;
}

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

nav {
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  width: 25%;
  float: left;
  padding-left: 0.5em;
  padding-right: 0.5em;
}

aside {
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  width: 16.66667%;
  float: right;
  padding-left: 0.5em;
  padding-right: 0.5em;
}

footer {
  clear: both;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  width: 100%;
  float: left;
  padding-left: 0.5em;
  padding-right: 0.5em;
}

header, nav, aside, footer {
  background: lightblue;
  border: 1px solid;
  opacity: .8;
}

SassMeister-rendered.html

 <div class="wrapper">
      <header>
     <h1>Header</h1>
  </header>
  
  <nav>
      <p>Nav.</p>
  </nav>
  
  <aside>
      <h2>Should be renamed Abu Dhabi FC for next season.</h2>
  </aside>
  
  <footer>
      <h3>This is the footer</h3>
  </footer>
</div>