Generated by SassMeister.com.

SassMeister-input-HTML.html

<div class="l-two-col">
  <div class="l-first"></div>
  <div class="l-second"></div>
</div>
<div class="l-three-col">
  <div class="l-first"></div>
  <div class="l-second"></div>
  <div class="l-third"></div>
</div>

SassMeister-input.scss

// ----
// Sass (v3.3.7)
// Compass (v1.0.0.alpha.18)
// Breakpoint (v2.4.2)
// ----

@import "breakpoint";
@import "singularitygs";
@include add-grid(12);
@include background-grid($color: blue);
body{
  width:50%;
  margin: auto;
  }
div{
  height:50vh;
  }
  @include add-gutter(1/3);
.l-first{
  background:black;
}
.l-second{
    background:red;
 }
.l-third{
   background:green;
 }
.l-two-col{
  @include add-grid(2 1);
  .l-first{
    @include grid-span(1, 1);
  }
  .l-second{
    @include grid-span(1, 2);
   
  }
}
.l-three-col{
  margin-top:10px;
  @include add-grid(3);
  .l-first{
    @include grid-span(1, 1);
  }
  .l-second{
    @include grid-span(1, 2);
  }
  .l-third{
    @include grid-span(1, 3);
  }
}

SassMeister-output.css

body {
  width: 50%;
  margin: auto;
}

div {
  height: 50vh;
}

.l-first {
  background: black;
}

.l-second {
  background: red;
}

.l-third {
  background: green;
}

.l-two-col .l-first {
  width: 42.85714%;
  float: left;
  margin-right: -100%;
  margin-left: 0;
  clear: none;
}
.l-two-col .l-second {
  width: 42.85714%;
  float: right;
  margin-left: 0;
  margin-right: 0;
  clear: none;
}

.l-three-col {
  margin-top: 10px;
}
.l-three-col .l-first {
  width: 27.27273%;
  float: left;
  margin-right: -100%;
  margin-left: 0;
  clear: none;
}
.l-three-col .l-second {
  width: 27.27273%;
  float: left;
  margin-right: -100%;
  margin-left: 36.36364%;
  clear: none;
}
.l-three-col .l-third {
  width: 27.27273%;
  float: right;
  margin-left: 0;
  margin-right: 0;
  clear: none;
}

SassMeister-rendered.html

<div class="l-two-col">
  <div class="l-first"></div>
  <div class="l-second"></div>
</div>
<div class="l-three-col">
  <div class="l-first"></div>
  <div class="l-second"></div>
  <div class="l-third"></div>
</div>