Generated by SassMeister.com.

SassMeister-input-HTML.html

<div class="outer">

  <article>
    <div class="nest-1">nest-1</div>
    <div class="nest-2">nest-2</div>
  </article>

  <aside>aside</aside>

  
</div>

SassMeister-input.scss

// ----
// Sass (v3.2.18)
// Compass (v0.12.4)
// Singularity.gs (v1.1.2)
// ----

@import "singularitygs";

$grids: 12;
$gutters: 1/3;


*, *:before, *:after {
  @include box-sizing(border-box);
}

body {
  margin: 0;
  padding: 0;
  height: 100%;
  // demo
}

.outer { 
overflow: hidden;
padding: 20px 0;
max-width:940px;
margin:auto;
background:#ccc;
}

article {
  background:#999;
  
  @include grid-span(8);
  @include layout(8) {
    .nest-1 {
      @include grid-span (4);
       background: #444;
    }
  
    .nest-2 {
      @include grid-span (4,5);
      background: #444;
    }
  }
}

aside {
  @include grid-span(4, 9);
}

// Demo styles for columns
article,
aside {
  color: white;
  font-family: sans-serif;
  font-size: 2em;
  padding: 20px 0;
  background-color: #777;
  text-align: center;
}

SassMeister-output.css

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

body {
  margin: 0;
  padding: 0;
  height: 100%;
}

.outer {
  overflow: hidden;
  padding: 20px 0;
  max-width: 940px;
  margin: auto;
  background: #ccc;
}

article {
  background: #999;
  width: 65.95745%;
  float: left;
  margin-right: -100%;
  margin-left: 0%;
  clear: none;
}
article .nest-1 {
  width: 48.3871%;
  float: left;
  margin-right: -100%;
  margin-left: 0%;
  clear: none;
  background: #444;
}
article .nest-2 {
  width: 48.3871%;
  float: right;
  margin-left: 0;
  margin-right: 0;
  clear: none;
  background: #444;
}

aside {
  width: 31.91489%;
  float: right;
  margin-left: 0;
  margin-right: 0;
  clear: none;
}

article,
aside {
  color: white;
  font-family: sans-serif;
  font-size: 2em;
  padding: 20px 0;
  background-color: #777;
  text-align: center;
}

SassMeister-rendered.html

<div class="outer">

  <article>
    <div class="nest-1">nest-1</div>
    <div class="nest-2">nest-2</div>
  </article>

  <aside>aside</aside>

  
</div>