Generated by SassMeister.com.

SassMeister-input-HTML.html

<div class="container">
    <div class="one"></div>
    <div class="two"></div>
    <div class="three"></div>
  </div>

SassMeister-input.scss

// ----
// Sass (v3.3.0.rc.5)
// Compass (v1.0.0.alpha.18)
// Breakpoint (v2.4.1)
// Singularity Extras (v1.0.0.alpha.3)
// Toolkit (v2.0.0.alpha.10)
// ----

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

body {
  margin: 0;
  padding: 0;
}

div {
  height: 50vh;
}
//////////////////////////////
// Grids
//////////////////////////////
$my-awesome-breakpoint: 500px (orientation portrait), 'no-query' '.no-mq';

@include add-grid(1 2 1);
@include add-grid(320px 1 2 at $my-awesome-breakpoint);
@include add-gutter(1/3);
@include add-gutter(1em at $my-awesome-breakpoint);
@include add-gutter-style('split');

@include sgs-change('debug', true);

.container {
  max-width: 700px;
  height: 100vh;
  // @include background-grid;
  margin: 0 auto;
}

.one {
  @include grid-span(1, 1);
  @include breakpoint($my-awesome-breakpoint) {
    @include layout($output-style: 'calc') {
      @include grid-span(1, 2);
    }

    height: 75vh;
  }
  background: rgba(red, .5);
}

.two {
  @include grid-span(1, 2);
  @include breakpoint($my-awesome-breakpoint) {
    @include layout($output-style: 'calc') {
      @include grid-span(1, 1);
    }
  }
  background: rgba(green, .5);
}

.three {
  @include grid-span(1, 3);
  @include breakpoint($my-awesome-breakpoint) {
    @include layout($output-style: 'calc') {
      @include grid-span(1, 3);
    }
  }
  background: rgba(blue, .5);
}

SassMeister-output.css

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

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

body {
  margin: 0;
  padding: 0;
}

div {
  height: 50vh;
}

.container {
  max-width: 700px;
  height: 100vh;
  margin: 0 auto;
}

.one {
  -sgs-span-settings: ("span": 1, "location": 1, "grid": 1 2 1, "gutter": 0.3333333333, "style": "split", "start row": true, "end row": false, "fixed gutter": false, "split gutter": 1, "gutter property": "margin", "options": ((null: null)));
  width: 20%;
  float: left;
  margin-right: -100%;
  margin-left: 3.3333333333%;
  clear: none;
  background: rgba(255, 0, 0, 0.5);
}
@media (min-width: 500px) and (orientation: portrait) {
  .one {
    -sgs-span-settings: ("span": 1, "location": 2, "grid": 320px 1 2, "gutter": 1em, "style": "split", "start row": false, "end row": false, "fixed gutter": true, "split gutter": 1, "gutter property": "padding", "options": ((null: null)));
    width: -webkit-calc((((100% - (320px + 3em)) / (3))) * 1);
    width: calc((((100% - (320px + 3em)) / (3))) * 1);
    float: left;
    margin-right: -100%;
    margin-left: -webkit-calc(0.5em + (320px + 1em));
    margin-left: calc(0.5em + (320px + 1em));
    height: 75vh;
  }
}

.two {
  -sgs-span-settings: ("span": 1, "location": 2, "grid": 1 2 1, "gutter": 0.3333333333, "style": "split", "start row": false, "end row": false, "fixed gutter": false, "split gutter": 1, "gutter property": "margin", "options": ((null: null)));
  width: 40%;
  float: left;
  margin-right: -100%;
  margin-left: 30%;
  clear: none;
  background: rgba(0, 128, 0, 0.5);
}
@media (min-width: 500px) and (orientation: portrait) {
  .two {
    -sgs-span-settings: ("span": 1, "location": 1, "grid": 320px 1 2, "gutter": 1em, "style": "split", "start row": true, "end row": false, "fixed gutter": true, "split gutter": 1, "gutter property": "padding", "options": ((null: null)));
    width: 320px;
    float: left;
    margin-right: -100%;
    margin-left: 0.5em;
  }
}

.three {
  -sgs-span-settings: ("span": 1, "location": 3, "grid": 1 2 1, "gutter": 0.3333333333, "style": "split", "start row": false, "end row": true, "fixed gutter": false, "split gutter": 1, "gutter property": "margin", "options": ((null: null)));
  width: 20%;
  float: right;
  margin-left: 0;
  margin-right: 3.3333333333%;
  clear: none;
  background: rgba(0, 0, 255, 0.5);
}
@media (min-width: 500px) and (orientation: portrait) {
  .three {
    -sgs-span-settings: ("span": 1, "location": 3, "grid": 320px 1 2, "gutter": 1em, "style": "split", "start row": false, "end row": true, "fixed gutter": true, "split gutter": 1, "gutter property": "padding", "options": ((null: null)));
    width: -webkit-calc((((100% - (320px + 3em)) / (3))) * 2);
    width: calc((((100% - (320px + 3em)) / (3))) * 2);
    float: right;
    margin-left: 0;
    margin-right: 0.5em;
  }
}

SassMeister-rendered.html

<div class="container">
    <div class="one"></div>
    <div class="two"></div>
    <div class="three"></div>
  </div>