Generated by SassMeister.com.

SassMeister-input-HTML.html

<div class="container">
  <!--<nav class="side">Side Menu</nav>-->
  <nav class="top">Top Menu</nav>

  <header>Hero</header>
  <main>
    <article>1</article>
    <article>2</article>
    <article>3</article>
    <article>4</article>
    <article>5</article>
    <article>6</article>
  </main>
  <aside>
    <article>A</article>
    <article>B</article>
    <article>C</article>
    <article>D</article>
    <article>E</article>
    <article>F</article>
  </aside>
  <footer>Footer</footer>
</div>

SassMeister-input.scss

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

@import "susy";

input::-moz-focus-inner,
button::-moz-focus-inner {
  padding: 0;
  border: 0;
}

$susy: (
  flow: ltr,
  math: fluid,
  output: float,
  gutter-position: after,
  container: auto,
  container-position: center,
  columns: 24,
  gutters: 3,
  column-width: false,
  global-box-sizing: border-box, //global-box-sizing: content-box,
  last-flow: to,
  debug: (
    image: show,
    color: rgba(#66f, .25),
    output: overlay,
    toggle: top right,
  ),
  use-custom: (
    background-image: false,
    background-options: false,
    box-sizing: false,
    clearfix: false,
    rem: false,
  )
);

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

html{
  background-color: #a2a2a2;
  padding: 0;
}

body{
  @include container(80%);
  margin:0 auto;
  background-color: #e2e2e2;
}

.container{
  position: relative;
  z-index: 1;
  overflow: hidden;
  background-color: blue;
  
}

header{
  min-height: 65px;
}

nav{
  position: fixed;
  color: white;
  
  &.top{
    @include span(80%);
    height: 65px;
    background-color: purple;
    border: 0.2em solid white;
    z-index: 1;
  }
  
  &.side{
    width: 280px;
    border: 0.2em dotted white;
    background-color: green;
    min-height: 100%;
    top: 65px;
    z-index: 0;
  }
}

footer{
  @include span(full);
  border: 0.2em solid white;
  color: white;
  height: 65px;
  background-color: skyblue;
}

main {
  @include span(16 no-gutters);
  background-color: pink;
  
  article{
    border: 0.2em solid red;
    @include span(8);
    height: 10em;
    margin-bottom: gutter();
    
    &:nth-child(3n){
      @include last;
    }
    
    &:nth-last-child(-n + 3 ){
      margin-bottom: 0;
    }
  }
}

aside{
  @include span(8 no-gutters);
  @include last;
  
  background-color: green;
  
  article{
    @include span(8);
    height: 5em;
    border: 0.2em solid firebrick;
    margin-bottom: 2 * gutter();
    
    //last column in 3 column grid
    &:nth-child(3n + 3){
       @include last;
    }
    //last row in 3 column grid
    &:nth-last-child(-n + 3 ){
      margin-bottom: 0;
    }
  }
}

SassMeister-output.css

input::-moz-focus-inner,
button::-moz-focus-inner {
  padding: 0;
  border: 0;
}

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

html {
  background-color: #a2a2a2;
  padding: 0;
}

body {
  max-width: 80%;
  margin-left: auto;
  margin-right: auto;
  margin: 0 auto;
  background-color: #e2e2e2;
}
body::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 ~ body, head:hover ~ body body {
  position: relative;
}
head:hover ~ body::before, head:hover ~ body body::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) 25%, transparent 25%);
  background-size: 4.3010752688%;
  background-origin: content-box;
  background-clip: content-box;
  background-position: left top;
}

.container {
  position: relative;
  z-index: 1;
  overflow: hidden;
  background-color: blue;
}

header {
  min-height: 65px;
}

nav {
  position: fixed;
  color: white;
}
nav.top {
  width: 80%;
  float: left;
  margin-right: 3.2258064516%;
  height: 65px;
  background-color: purple;
  border: 0.2em solid white;
  z-index: 1;
}
nav.side {
  width: 280px;
  border: 0.2em dotted white;
  background-color: green;
  min-height: 100%;
  top: 65px;
  z-index: 0;
}

footer {
  width: 100%;
  float: left;
  border: 0.2em solid white;
  color: white;
  height: 65px;
  background-color: skyblue;
}

main {
  width: 65.5913978495%;
  float: left;
  background-color: pink;
}
main article {
  border: 0.2em solid red;
  width: 31.1827956989%;
  float: left;
  margin-right: 3.2258064516%;
  height: 10em;
  margin-bottom: 3.2258064516%;
}
main article:nth-child(3n) {
  float: right;
  margin-right: 0;
}
main article:nth-last-child(-n + 3) {
  margin-bottom: 0;
}

aside {
  width: 31.1827956989%;
  float: left;
  float: right;
  margin-right: 0;
  background-color: green;
}
aside article {
  width: 31.1827956989%;
  float: left;
  margin-right: 3.2258064516%;
  height: 5em;
  border: 0.2em solid firebrick;
  margin-bottom: 6.4516129032%;
}
aside article:nth-child(3n + 3) {
  float: right;
  margin-right: 0;
}
aside article:nth-last-child(-n + 3) {
  margin-bottom: 0;
}

SassMeister-rendered.html

<div class="container">
  <!--<nav class="side">Side Menu</nav>-->
  <nav class="top">Top Menu</nav>

  <header>Hero</header>
  <main>
    <article>1</article>
    <article>2</article>
    <article>3</article>
    <article>4</article>
    <article>5</article>
    <article>6</article>
  </main>
  <aside>
    <article>A</article>
    <article>B</article>
    <article>C</article>
    <article>D</article>
    <article>E</article>
    <article>F</article>
  </aside>
  <footer>Footer</footer>
</div>