Singularity Grid settings

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: 4;
  $aside: 1;
  
  $layout-1: $sidebar, $main-content, $aside, $aside, $aside;
  $layout-2: $aside, $main-content, $aside, $sidebar, $aside;
  
  @include add-grid($layout-2);
  @include add-gutter(1/10);
  
  [class*="grid"] {
      border: 1px solid white;
      height: 5em;
    }
  
  @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);
     background: get-color();
     &:before {
         content:attr(class);
     }
  }
}

.test {
  width: 100%;
  border: 2px solid green;
  position: relative;
  &:after {
    content: '';
    clear: both;
    display: table;
  }
}

SassMeister-output.css

[class*="grid"] {
  border: 1px solid white;
  height: 5em;
}

.grid-1 {
  width: 10.6383%;
  float: left;
  margin-right: -100%;
  margin-left: 0;
  clear: none;
  background: #04e722;
}
.grid-1:before {
  content: attr(class);
}

.grid-2 {
  width: 42.55319%;
  float: left;
  margin-right: -100%;
  margin-left: 11.70213%;
  clear: none;
  background: #e7ec14;
}
.grid-2:before {
  content: attr(class);
}

.grid-3 {
  width: 10.6383%;
  float: left;
  margin-right: -100%;
  margin-left: 55.31915%;
  clear: none;
  background: #cecd47;
}
.grid-3:before {
  content: attr(class);
}

.grid-4 {
  width: 21.2766%;
  float: left;
  margin-right: -100%;
  margin-left: 67.02128%;
  clear: none;
  background: #9f1328;
}
.grid-4:before {
  content: attr(class);
}

.grid-5 {
  width: 10.6383%;
  float: right;
  margin-left: 0;
  margin-right: 0;
  clear: none;
  background: #fc8de0;
}
.grid-5:before {
  content: attr(class);
}

.test {
  width: 100%;
  border: 2px solid green;
  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>