Generated by SassMeister.com.

SassMeister-input-HTML.html

<div>
  <div class="left"></div>
  <div class="middle-top"></div>
  <div class="middle-left"></div>
  <div class="middle-right"></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);
@include add-gutter-style('split');

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

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

.middle-top {
  @include grid-span(2, 3);
  background-color: $lblue;
  height: 10em;
}

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

.middle-right {
  @include grid-span(1, 4);
  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: 29.16667%;
  float: left;
  margin-right: -100%;
  margin-left: 2.08333%;
  clear: none;
}

.middle-top {
  width: 29.16667%;
  float: left;
  margin-right: -100%;
  margin-left: 35.41667%;
  clear: none;
  background-color: #5aaafa;
  height: 10em;
}

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

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

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

SassMeister-rendered.html

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