Generated by SassMeister.com.

SassMeister-input-HTML.html

<div class="test">
      <div class="grid-1"></div>
      <div class="grid-2"></div>
      <div class="grid-3"></div>
      <div class="grid-4"></div>
      <div class="grid-5"></div>
    </div>    

SassMeister-input.scss

// ----
// Sass (v3.4.7)
// Compass (v1.0.1)
// Singularity.gs (v1.4.0)
// ----

    @import "singularitygs";  
    
    $sidebar: 2;
    $main-content: 12;
    $aside: 1;
    
    $layout-1: $sidebar, $main-content, $aside, $aside, $aside;
    $layout-2: $aside, $main-content, $aside, $sidebar, $aside;
    
    @include add-grid($layout-1);
    @include add-gutter(1/10);
    
    [class*="grid"] {
        border: 1px solid white;
        height: 5em;
        text-align: center;
        position: relative;
        &:before {
           content:attr(class);
           position: absolute;
           left: 50%;
           top: 50%;
           display: inline-block;
           transform: translate(-50%, -50%);
       }
      }
    
  @function get-color() {
    $color: rgb(random(255), random(255), random(255));
    @return $color;
  }

@for $i from 1 through 5 {
  .grid-#{$i} {
     @include grid-span(1, $i);
     border: 4px dotted get-color();
     box-sizing: border-box;
  }
}

.test {
  width: 100%;
  position: relative;
  &:after {
    content: '';
    clear: both;
    display: table;
  }
}

SassMeister-output.css

[class*="grid"] {
  border: 1px solid white;
  height: 5em;
  text-align: center;
  position: relative;
}
[class*="grid"]:before {
  content: attr(class);
  position: absolute;
  left: 50%;
  top: 50%;
  display: inline-block;
  transform: translate(-50%, -50%);
}

.grid-1 {
  width: 11.4942528736%;
  float: left;
  margin-right: -100%;
  margin-left: 0;
  clear: none;
  border: 4px dotted #0238c5;
  box-sizing: border-box;
}

.grid-2 {
  width: 68.9655172414%;
  float: left;
  margin-right: -100%;
  margin-left: 12.0689655172%;
  clear: none;
  border: 4px dotted #775770;
  box-sizing: border-box;
}

.grid-3 {
  width: 5.7471264368%;
  float: left;
  margin-right: -100%;
  margin-left: 81.6091954023%;
  clear: none;
  border: 4px dotted #86da04;
  box-sizing: border-box;
}

.grid-4 {
  width: 5.7471264368%;
  float: left;
  margin-right: -100%;
  margin-left: 87.9310344828%;
  clear: none;
  border: 4px dotted #0383eb;
  box-sizing: border-box;
}

.grid-5 {
  width: 5.7471264368%;
  float: right;
  margin-left: 0;
  margin-right: 0;
  clear: none;
  border: 4px dotted #518dab;
  box-sizing: border-box;
}

.test {
  width: 100%;
  position: relative;
}
.test:after {
  content: '';
  clear: both;
  display: table;
}

SassMeister-rendered.html

<div class="test">
      <div class="grid-1"></div>
      <div class="grid-2"></div>
      <div class="grid-3"></div>
      <div class="grid-4"></div>
      <div class="grid-5"></div>
    </div>