Generated by SassMeister.com.

SassMeister-input-HTML.html

<div class="one"></div>
<div class="two">
  <div class="sub-one"></div>
  <div class="sub-two"></div>
  <div class="sub-three"></div>
  <div class="sub-four"></div>
</div>
<div class="three"></div>
<div class="four"></div>

SassMeister-input.scss

// ----
// Sass (v3.3.6)
// Compass (v1.0.0.alpha.18)
// Breakpoint (v)
// Singularity.gs (v)
// Singularity Extras (v)
// ----

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

@include background-grid($color: blue);

@include add-grid(1 4 3 1);

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

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

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

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

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

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

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

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

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

SassMeister-output.css

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

.one {
  width: 10.2564102564%;
  float: left;
  margin-right: -100%;
  margin-left: 0;
  clear: none;
}

.two {
  width: 41.0256410256%;
  float: left;
  margin-right: -100%;
  margin-left: 12.8205128205%;
  clear: none;
}

.three {
  width: 30.7692307692%;
  float: left;
  margin-right: -100%;
  margin-left: 56.4102564103%;
  clear: none;
}

.four {
  width: 10.2564102564%;
  float: right;
  margin-left: 0;
  margin-right: 0;
  clear: none;
}

.sub-one {
  width: 10.2564102564%;
  float: left;
  margin-right: -100%;
  margin-left: 0;
  clear: none;
}

.sub-two {
  width: 41.0256410256%;
  float: left;
  margin-right: -100%;
  margin-left: 12.8205128205%;
  clear: none;
}

.sub-three {
  width: 30.7692307692%;
  float: left;
  margin-right: -100%;
  margin-left: 56.4102564103%;
  clear: none;
}

.sub-four {
  width: 10.2564102564%;
  float: right;
  margin-left: 0;
  margin-right: 0;
  clear: none;
}

SassMeister-rendered.html

<div class="one"></div>
<div class="two">
  <div class="sub-one"></div>
  <div class="sub-two"></div>
  <div class="sub-three"></div>
  <div class="sub-four"></div>
</div>
<div class="three"></div>
<div class="four"></div>