Generated by SassMeister.com.

SassMeister-input-HTML.html

<div class="sidebar-primary">
  Sidebar Primary
</div>
<div class="content-area">
  Content
</div>
<div class="sidebar-secondary">
  Secondary
</div>

SassMeister-input.scss

// ----
// Sass (v3.3.6)
// Compass (v1.0.0.alpha.18)
// Breakpoint (v)
// Singularity.gs (v)
// ----

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

@include add-grid(1 4 1);
@include add-grid(960 751.538 464.486 at 900px);


@include add-gutter(1/5);
@include add-gutter(1/6);
div {
  height: 100vh;
  background: rgba(red, 0.2);
  }

  
.sidebar-primary {
  background: blue;
  @include grid-span(1,1);
  @include breakpoint(700px) {
    @include grid-span(1,3);
  }
  @include breakpoint(900px) {
    @include grid-span(1,1);
  }
}  

.sidebar-secondary {
  @include grid-span(1,3);
  background: green;
  @include breakpoint (700px) {
    @include grid-span(2,1);
  }
  @include breakpoint(900px) {
    @include grid-span(1,2);
  }
}  

.content-area {
  @include grid-span(1,2);
  background: yellow;
  @include breakpoint(900px) {
    @include grid-span(1,3);
  }
}

SassMeister-output.css

div {
  height: 100vh;
  background: rgba(255, 0, 0, 0.2);
}

.sidebar-primary {
  background: blue;
  width: 15.78947%;
  float: left;
  margin-right: -100%;
  margin-left: 0;
  clear: none;
}
@media (min-width: 700px) {
  .sidebar-primary {
    width: 15.78947%;
    float: right;
    margin-left: 0;
    margin-right: 0;
    clear: none;
  }
}
@media (min-width: 900px) {
  .sidebar-primary {
    width: 44.1104%;
    float: left;
    margin-right: -100%;
    margin-left: 0;
    clear: none;
  }
}

.sidebar-secondary {
  width: 15.78947%;
  float: right;
  margin-left: 0;
  margin-right: 0;
  clear: none;
  background: green;
}
@media (min-width: 700px) {
  .sidebar-secondary {
    width: 81.57895%;
    float: left;
    margin-right: -100%;
    margin-left: 0;
    clear: none;
  }
}
@media (min-width: 900px) {
  .sidebar-secondary {
    width: 34.53192%;
    float: left;
    margin-right: -100%;
    margin-left: 44.11806%;
    clear: none;
  }
}

.content-area {
  width: 63.15789%;
  float: left;
  margin-right: -100%;
  margin-left: 18.42105%;
  clear: none;
  background: yellow;
}
@media (min-width: 900px) {
  .content-area {
    width: 21.34236%;
    float: right;
    margin-left: 0;
    margin-right: 0;
    clear: none;
  }
}

SassMeister-rendered.html

<div class="sidebar-primary">
  Sidebar Primary
</div>
<div class="content-area">
  Content
</div>
<div class="sidebar-secondary">
  Secondary
</div>