Generated by SassMeister.com.

SassMeister-input-HTML.haml

.grid-1
  .col-1
  .col-2
  .col-3
.grid-2
  .col-1
  .col-2
  .col-3

SassMeister-input.scss

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

@import "breakpoint";
@import "singularitygs";



* {
  &,
  &::after,
  &::before {
    box-sizing: border-box;
  }
}
div {
  background: rgba(black, .125);
  border: 1px solid gray;
  height: 5em;
}
.grid-1 {
  @include add-grid(.25 8 .25);
  @include add-gutter(1/4);
}
.grid-2 {
  @include add-grid(1 32 1);
  @include add-gutter(1/4);
}
.col-1 {
    @include grid-span(1, 1);
}
.col-2 {
    @include grid-span(1, 2);
}
.col-3 {
    @include grid-span(1, 3);
}

SassMeister-output.css

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

div {
  background: rgba(0, 0, 0, 0.125);
  border: 1px solid gray;
  height: 5em;
}

.col-1 {
  width: 2.8985507246%;
  float: left;
  margin-right: -100%;
  margin-left: 0;
  clear: none;
}

.col-2 {
  width: 92.7536231884%;
  float: left;
  margin-right: -100%;
  margin-left: 3.6231884058%;
  clear: none;
}

.col-3 {
  width: 2.8985507246%;
  float: right;
  margin-left: 0;
  margin-right: 0;
  clear: none;
}

SassMeister-rendered.html

<div class='grid-1'>
  <div class='col-1'></div>
  <div class='col-2'></div>
  <div class='col-3'></div>
</div>
<div class='grid-2'>
  <div class='col-1'></div>
  <div class='col-2'></div>
  <div class='col-3'></div>
</div>