JSChannel Example

SassMeister-input-HTML.html

<div class="sidebar-primary"></div>
<div class="sidebar-secondary"></div>
<div class="content-area"></div>

SassMeister-input.scss

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

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

@include add-grid(1 1 4 at 500px);
@include add-grid(1 3.224 1.618 at 800px);
@include add-gutter(.5);
@include add-gutter(1/3 at 800px);

body {
  margin: 0;
  padding: 0;
  }
div {
  height: 100vh;
  }
  
.sidebar-primary {
  background: red;
  @include breakpoint(500px) {
      @include grid-span(1,1);
  }
  @include breakpoint(800px) {
    @include grid-span(1, 1); 
    &.open {
      @include grid-span(1, 1);   
    }
  }
}
.sidebar-secondary {
  background: blue;
  @include breakpoint(500px) {
    @include grid-span(1, 2);
  }
  @include breakpoint(800px) {
    @include grid-span(1,3);
  }
}
.content-area {
  background: yellow;
  @include breakpoint(500px) {
      @include grid-span(1,3);  
  }
  @include breakpoint(800px) {
    @include grid-span(1,2);
  }
}

SassMeister-output.css

body {
  margin: 0;
  padding: 0;
}

div {
  height: 100vh;
}

.sidebar-primary {
  background: red;
}
@media (min-width: 500px) {
  .sidebar-primary {
    width: 14.28571%;
    float: left;
    margin-right: -100%;
    margin-left: 0;
    clear: none;
  }
}
@media (min-width: 800px) {
  .sidebar-primary {
    width: 15.36413%;
    float: left;
    margin-right: -100%;
    margin-left: 0;
    clear: none;
  }
  .sidebar-primary.open {
    width: 15.36413%;
    float: left;
    margin-right: -100%;
    margin-left: 0;
    clear: none;
  }
}

.sidebar-secondary {
  background: blue;
}
@media (min-width: 500px) {
  .sidebar-secondary {
    width: 14.28571%;
    float: left;
    margin-right: -100%;
    margin-left: 21.42857%;
    clear: none;
  }
}
@media (min-width: 800px) {
  .sidebar-secondary {
    width: 24.85916%;
    float: right;
    margin-left: 0;
    margin-right: 0;
    clear: none;
  }
}

.content-area {
  background: yellow;
}
@media (min-width: 500px) {
  .content-area {
    width: 57.14286%;
    float: right;
    margin-left: 0;
    margin-right: 0;
    clear: none;
  }
}
@media (min-width: 800px) {
  .content-area {
    width: 49.53395%;
    float: left;
    margin-right: -100%;
    margin-left: 20.48551%;
    clear: none;
  }
}

SassMeister-rendered.html

<div class="sidebar-primary"></div>
<div class="sidebar-secondary"></div>
<div class="content-area"></div>