Generated by SassMeister.com.

SassMeister-input-HTML.html

<div class="container">
  <div class="sidebar">sidebar</div>
  <div class="content">content</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-gutter-style('split');
@include add-gutter(20px);
@include sgs-change('output', 'float');

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

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

SassMeister-output.css

* {
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}

.container {
  width: 800px;
  height: 100vh;
  margin: 0 auto;
  background: rgba(0, 0, 0, 0.5);
}

.sidebar {
  height: 50vh;
  background: rgba(255, 255, 0, 0.5);
  width: 50%;
  clear: right;
  float: left;
  padding-left: 10px;
  padding-right: 10px;
}

.content {
  height: 50vh;
  background: rgba(255, 0, 0, 0.5);
  width: 50%;
  clear: right;
  float: right;
  padding-left: 10px;
  padding-right: 10px;
}

SassMeister-rendered.html

<div class="container">
  <div class="sidebar">sidebar</div>
  <div class="content">content</div>
</div>