Generated by SassMeister.com.

SassMeister-input-HTML.html

<div class="one"></div>
<div class="two"></div>
<div class="three"></div>
<div class="four"></div>
<div class="five"></div>

SassMeister-input.scss

// ----
// Sass (v3.3.6)
// Compass (v)
// Breakpoint (v)
// Singularity.gs (v)
// Singularity Extras (v)
// Toolkit (v)
// ----

@import "breakpoint";
@import "compass";
@import "singularitygs";
@import "singularitygs";
@import "singularity-extras";
@import "toolkit";

@include add-grid(5);
@include add-gutter(30px);

div {
  background: rgba(red, 0.2);
  height: 100vh;
}

.one {
  @include grid-span(1,1);
}

.two {
  @include grid-span(1,2);
}

.three {
  @include grid-span(1,3);
}

.four {
  @include grid-span(1,4);
}

.five {
  @include grid-span(1,5);
}

SassMeister-output.css

div {
  background: rgba(255, 0, 0, 0.2);
  height: 100vh;
}

.one {
  width: 20%;
  float: left;
  margin-right: -100%;
  clear: none;
  padding-right: 30px;
}

.two {
  width: 20%;
  float: left;
  margin-right: -100%;
  margin-left: 20%;
  clear: none;
  padding-right: 30px;
}

.three {
  width: 20%;
  float: left;
  margin-right: -100%;
  margin-left: 40%;
  clear: none;
  padding-right: 30px;
}

.four {
  width: 20%;
  float: left;
  margin-right: -100%;
  margin-left: 60%;
  clear: none;
  padding-right: 30px;
}

.five {
  width: 20%;
  float: right;
  margin-left: 0;
  margin-right: 0;
  clear: none;
  padding-right: 0;
}

SassMeister-rendered.html

<div class="one"></div>
<div class="two"></div>
<div class="three"></div>
<div class="four"></div>
<div class="five"></div>