Generated by SassMeister.com.

SassMeister-input-HTML.html

<div>
  <div class="middle">
    <div class="middle--top"></div>
    <div class="middle--left"></div>
    <div class="middle--right"></div>  
  </div>
  <div class="left"></div>
  <div class="right"></div>
</div>

SassMeister-input.scss

// ----
// libsass (v3.2.4)
// ----

@import "singularitygs";

$green: #8cd211;
$dblue: #325c80;
$lblue: #5aaafa;

@include add-grid(6);
@include add-gutter(1/3);


%side-col {
  background-color: $green;
  height: 30em;
}

.left {
  @include grid-span(2, 1);
  @extend %side-col;
}

.middle {
  @include grid-span(2, 3);
}



@include layout(2) {
  .middle--top {
    margin-bottom: gutter-span();
  background-color: $lblue;
  height: 10em;
}
 .middle--left {
  @include grid-span(1, 1);
  background-color: $dblue;
  height: 10em;
  clear: left;
}

.middle--right {
  @include grid-span(1, 2);
  background-color: $dblue;
  height: 10em;
} 
}

.right {
  @include grid-span(2, 5);
  @extend %side-col;
}

SassMeister-output.css

.left, .right {
  background-color: #8cd211;
  height: 30em;
}

.left {
  width: 30.43478%;
  float: left;
  margin-right: -100%;
  margin-left: 0;
  clear: none;
}

.middle {
  width: 30.43478%;
  float: left;
  margin-right: -100%;
  margin-left: 34.78261%;
  clear: none;
}

.middle--top {
  margin-bottom: 14.28571%;
  background-color: #5aaafa;
  height: 10em;
}

.middle--left {
  width: 42.85714%;
  float: left;
  margin-right: -100%;
  margin-left: 0;
  clear: none;
  background-color: #325c80;
  height: 10em;
  clear: left;
}

.middle--right {
  width: 42.85714%;
  float: right;
  margin-left: 0;
  margin-right: 0;
  clear: none;
  background-color: #325c80;
  height: 10em;
}

.right {
  width: 30.43478%;
  float: right;
  margin-left: 0;
  margin-right: 0;
  clear: none;
}

SassMeister-rendered.html

<div>
  <div class="middle">
    <div class="middle--top"></div>
    <div class="middle--left"></div>
    <div class="middle--right"></div>  
  </div>
  <div class="left"></div>
  <div class="right"></div>
</div>