Generated by SassMeister.com.

SassMeister-input-HTML.html

<div class="container">

  <div class="sidebar-wrapper">
    <div class="content">
    sidebar
    </div>
  </div>

  <div class="content-wrapper">
    <div class="content">
      content
    </div>
  </div>
  
</div>

SassMeister-input.scss

// ----
// Sass (v3.3.10)
// Compass (v1.0.0.alpha.20)
// Breakpoint (v2.4.2)
// Singularity.gs (v1.2.1)
// ----

@import "compass";
@import 'breakpoint';
@import 'singularitygs';

@include add-grid(4);
//@include add-grid(6 at 600px);
@include add-grid(3 3 3 3 at 600px);

@include add-gutter-style('split');
@include add-gutter(20px);

@include sgs-change('debug', true);
@include background-grid($color: blue);

$mediumBreakpoint: 800px;

*{
  @include box-sizing('border-box');
}

.container{
  width: 800px;
  height: 100vh;
  margin: 0 auto;
  background: rgba(black, .1);
}
.sidebar-wrapper{
  height: 50vh;
  background: rgba(red, .5);
  @include grid-span(2,1);
  
  @include breakpoint($mediumBreakpoint) {
    @include grid-span(1, 1);
  }
}
.content-wrapper{
  height: 50vh;
  background: rgba(red, .5);
  @include grid-span(2,3);
  
  @include breakpoint($mediumBreakpoint) {
    @include grid-span(1, 4);
  }
}

.content{
  background: green;
  height: 100%;
}

SassMeister-output.css

Incompatible units: '%' and 'px'.

SassMeister-rendered.html

<div class="container">

  <div class="sidebar-wrapper">
    <div class="content">
    sidebar
    </div>
  </div>

  <div class="content-wrapper">
    <div class="content">
      content
    </div>
  </div>
  
</div>