Generated by SassMeister.com.

SassMeister-input-HTML.html

<div class="l-page">
    <div class="l-content">
        <div class="content-inner"></div>
        <div class="content-inner"></div>
        <div class="content-inner"></div>
        <div class="content-inner"></div>
        <div class="content-inner"></div>
        <div class="content-inner"></div>
        <div class="content-inner"></div>
        <div class="content-inner"></div>
    </div>
    <div class="l-region--sidebar-first"></div>
    <div class="l-region--sidebar-second"></div>
</div>

SassMeister-input.scss

// ----
// Sass (v3.4.12)
// Compass (v1.0.3)
// Singularity.gs (v1.5.1)
// ----

@import "singularitygs";
// Singularity 1.2+ Syntax
@include add-grid(16);
@include add-gutter(1/3);
// Be sure to enable debug mode for your grid visualization so show up:
@include sgs-change('debug', true);


.l-page {
  @include background-grid($color: blue);
    //width: 960px; //if we want to constrain the grid to a non-fluid layout.
    margin: 0 auto;
    height: 300px;
}
.l-region--sidebar-first {
    @include grid-span(4,1); //sets it to 4 columns wide, that starts with the 1st column
}
.l-content {
  height: 300px;
    background: rgba(0,0,0,.3);
    @include grid-span(8,5); //sets it to 8 columns wide, that starts with the 5th column
}
.l-region--sidebar-second {
    @include grid-span(4,13); //sets it to 4 columns wide, that starts with the 13th column
}

.content-inner {
  display: inline-block;
  width: 100%;
  height: 50px;
  margin: 10px 0px;
    background: rgba(255,0,0,.3);
    //@include grid-span(4,1, $output-style: 'float');
    @include float-span(4,1);
    &:last-child {
       @include float-span(4, 'last');
    }
}

SassMeister-output.css

.l-page {
  background-image: linear-gradient(to right, blue 0%, blue 4.7619%, #3f3fff 4.7619%, #3f3fff 6.34921%, blue 6.34921%, blue 11.11111%, #3f3fff 11.11111%, #3f3fff 12.69841%, blue 12.69841%, blue 17.46032%, #3f3fff 17.46032%, #3f3fff 19.04762%, blue 19.04762%, blue 23.80952%, #3f3fff 23.80952%, #3f3fff 25.39683%, blue 25.39683%, blue 30.15873%, #3f3fff 30.15873%, #3f3fff 31.74603%, blue 31.74603%, blue 36.50794%, #3f3fff 36.50794%, #3f3fff 38.09524%, blue 38.09524%, blue 42.85714%, #3f3fff 42.85714%, #3f3fff 44.44444%, blue 44.44444%, blue 49.20635%, #3f3fff 49.20635%, #3f3fff 50.79365%, blue 50.79365%, blue 55.55556%, #3f3fff 55.55556%, #3f3fff 57.14286%, blue 57.14286%, blue 61.90476%, #3f3fff 61.90476%, #3f3fff 63.49206%, blue 63.49206%, blue 68.25397%, #3f3fff 68.25397%, #3f3fff 69.84127%, blue 69.84127%, blue 74.60317%, #3f3fff 74.60317%, #3f3fff 76.19048%, blue 76.19048%, blue 80.95238%, #3f3fff 80.95238%, #3f3fff 82.53968%, blue 82.53968%, blue 87.30159%, #3f3fff 87.30159%, #3f3fff 88.88889%, blue 88.88889%, blue 93.65079%, #3f3fff 93.65079%, #3f3fff 95.2381%, blue 95.2381%, blue);
  margin: 0 auto;
  height: 300px;
}

.l-region--sidebar-first {
  -sgs-span-settings: ("span": 4, "location": 1, "grid": 16, "gutter": 0.33333, "style": "opposite", "start row": true, "end row": false, "fixed gutter": false, "split gutter": null, "gutter property": "margin", "options": (null: null));
  width: 23.80952%;
  float: left;
  margin-right: -100%;
  margin-left: 0;
  clear: none;
}

.l-content {
  height: 300px;
  background: rgba(0, 0, 0, 0.3);
  -sgs-span-settings: ("span": 8, "location": 5, "grid": 16, "gutter": 0.33333, "style": "opposite", "start row": false, "end row": false, "fixed gutter": false, "split gutter": null, "gutter property": "margin", "options": (null: null));
  width: 49.20635%;
  float: left;
  margin-right: -100%;
  margin-left: 25.39683%;
  clear: none;
}

.l-region--sidebar-second {
  -sgs-span-settings: ("span": 4, "location": 13, "grid": 16, "gutter": 0.33333, "style": "opposite", "start row": false, "end row": true, "fixed gutter": false, "split gutter": null, "gutter property": "margin", "options": (null: null));
  width: 23.80952%;
  float: right;
  margin-left: 0;
  margin-right: 0;
  clear: none;
}

.content-inner {
  display: inline-block;
  width: 100%;
  height: 50px;
  margin: 10px 0px;
  background: rgba(255, 0, 0, 0.3);
  -sgs-span-settings: ("span": 4, "location": 1, "grid": 16, "gutter": 0.33333, "style": "opposite", "start row": true, "end row": false, "fixed gutter": false, "split gutter": null, "gutter property": "margin", "options": (null: null));
  width: 23.80952%;
  clear: right;
  float: left;
  margin-left: 0;
  margin-right: 1.5873%;
}
.content-inner:last-child {
  -sgs-span-settings: ("span": 4, "location": 13, "grid": 16, "gutter": 0.33333, "style": "opposite", "start row": false, "end row": true, "fixed gutter": false, "split gutter": null, "gutter property": "margin", "options": (null: null));
  width: 23.80952%;
  clear: right;
  float: right;
  margin-right: 0;
}

SassMeister-rendered.html

<div class="l-page">
    <div class="l-content">
        <div class="content-inner"></div>
        <div class="content-inner"></div>
        <div class="content-inner"></div>
        <div class="content-inner"></div>
        <div class="content-inner"></div>
        <div class="content-inner"></div>
        <div class="content-inner"></div>
        <div class="content-inner"></div>
    </div>
    <div class="l-region--sidebar-first"></div>
    <div class="l-region--sidebar-second"></div>
</div>