Generated by SassMeister.com.

SassMeister-input-HTML.haml

.one
.two
.three
.four

SassMeister-input.scss

// ----
// Sass (v3.3.0.rc.2)
// Compass (v1.0.0.alpha.17)
// Breakpoint (v2.4.1)
// Singularity Extras (v1.0.0.alpha.1)
// Toolkit (v2.0.0.alpha.7)
// ----

@import "breakpoint";
@import "singularitygs";
@import "singularity-extras";
@import "toolkit/kickstart";

@include add-grid(300px 1 5em 2);
@include add-gutter(1em);
@include sgs-change('output', 'calc');

div {
  height: 100vh;
}

.one {
  background: red;
  @include grid-span(1, 4);
}

.two {
  background: blue;
  @include grid-span(1, 3);
}

.three {
  background: green;
  @include grid-span(1, 2);
}

.four {
  background: yellow;
  @include grid-span(1, 1);
}

SassMeister-output.css

*, *:before, *:after {
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

img, video {
  max-width: 100%;
  height: auto;
}

div {
  height: 100vh;
}

.one {
  background: red;
  width: 5em;
  float: right;
  margin-left: 0;
  margin-right: 0;
}

.two {
  background: blue;
  width: -webkit-calc((((100% - (300px + 5em + 3em)) / (3))) * 2);
  width: calc((((100% - (300px + 5em + 3em)) / (3))) * 2);
  float: left;
  margin-right: -100%;
  margin-left: -webkit-calc((300px + 1em) + (((100% - (300px + 5em + 3em)) / (3)) * 1 + 1em));
  margin-left: calc((300px + 1em) + (((100% - (300px + 5em + 3em)) / (3)) * 1 + 1em));
}

.three {
  background: green;
  width: -webkit-calc((((100% - (300px + 5em + 3em)) / (3))) * 1);
  width: calc((((100% - (300px + 5em + 3em)) / (3))) * 1);
  float: left;
  margin-right: -100%;
  margin-left: -webkit-calc((300px + 1em));
  margin-left: calc((300px + 1em));
}

.four {
  background: yellow;
  width: 300px;
  float: left;
  margin-right: -100%;
  margin-left: 0;
}

SassMeister-rendered.html

<div class='one'></div>
<div class='two'></div>
<div class='three'></div>
<div class='four'></div>