Geek night example

SassMeister-input-HTML.html

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

SassMeister-input.scss

// ----
// Sass (v3.3.4)
// Compass (v1.0.0.alpha.18)
// Breakpoint (v2.4.2)
// Singularity.gs (v1.2.0)
// Singularity Extras (v1.0.0.alpha.3)
// Toolkit (v2.0.1)
// ----

@import "breakpoint";
@import "compass";
@import "toolkit";
@import "singularitygs";
@import "singularity-extras";

 @include add-grid(1 4 at 480px);
 @include add-grid(1 1 4 at 600px);
 @include add-grid(1 1 4 1 at 768px);
 
 .sidebar-primary{
   height: 100vh;
   background: red;
   @include breakpoint(480px) {
     @include grid-span(1, 1);
   }
   @include breakpoint(600px) {
     @include grid-span(1, 1);
   }
   @include breakpoint(768px) {
     @include grid-span(1, 1);
   }
  }
  
  .sidebar-secondary {
    height: 100vh;
    background: blue;
    @include breakpoint(480px) {
      display: none;
    }
    @include breakpoint(600px) {
      display: block;
      @include grid-span(1, 2);
    }
    @include breakpoint(768px) {
     @include grid-span(1, 2);
   }
  }
  
  .content-area {
    height: 100vh;
    background: gray;
    @include breakpoint(480px) {
      @include grid-span (1, 2);
    }
    @include breakpoint(600px) {
     @include grid-span(1, 3);
   }
   @include breakpoint(768px) {
     @include grid-span(1, 3);
   }
  }
  
  .sidebar-tertiary {
    height: 100vh;
    background: yellow;
    @include breakpoint(480px) {
      display: none;
    }
    @include breakpoint(600px) {
     display: none;
   }
   @include breakpoint(768px) {
      display: block;
     @include grid-span(1, 4);
   }
  }

SassMeister-output.css

.sidebar-primary {
  height: 100vh;
  background: red;
}
@media (min-width: 480px) {
  .sidebar-primary {
    width: 19.04762%;
    float: left;
    margin-right: -100%;
    margin-left: 0;
    clear: none;
  }
}
@media (min-width: 600px) {
  .sidebar-primary {
    width: 15.38462%;
    float: left;
    margin-right: -100%;
    margin-left: 0;
    clear: none;
  }
}
@media (min-width: 768px) {
  .sidebar-primary {
    width: 12.90323%;
    float: left;
    margin-right: -100%;
    margin-left: 0;
    clear: none;
  }
}

.sidebar-secondary {
  height: 100vh;
  background: blue;
}
@media (min-width: 480px) {
  .sidebar-secondary {
    display: none;
  }
}
@media (min-width: 600px) {
  .sidebar-secondary {
    display: block;
    width: 15.38462%;
    float: left;
    margin-right: -100%;
    margin-left: 19.23077%;
    clear: none;
  }
}
@media (min-width: 768px) {
  .sidebar-secondary {
    width: 12.90323%;
    float: left;
    margin-right: -100%;
    margin-left: 16.12903%;
    clear: none;
  }
}

.content-area {
  height: 100vh;
  background: gray;
}
@media (min-width: 480px) {
  .content-area {
    width: 76.19048%;
    float: right;
    margin-left: 0;
    margin-right: 0;
    clear: none;
  }
}
@media (min-width: 600px) {
  .content-area {
    width: 61.53846%;
    float: right;
    margin-left: 0;
    margin-right: 0;
    clear: none;
  }
}
@media (min-width: 768px) {
  .content-area {
    width: 51.6129%;
    float: left;
    margin-right: -100%;
    margin-left: 32.25806%;
    clear: none;
  }
}

.sidebar-tertiary {
  height: 100vh;
  background: yellow;
}
@media (min-width: 480px) {
  .sidebar-tertiary {
    display: none;
  }
}
@media (min-width: 600px) {
  .sidebar-tertiary {
    display: none;
  }
}
@media (min-width: 768px) {
  .sidebar-tertiary {
    display: block;
    width: 12.90323%;
    float: right;
    margin-left: 0;
    margin-right: 0;
    clear: none;
  }
}

SassMeister-rendered.html

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