Singularity sample 2

SassMeister-input-HTML.html

<div class="container">
  <div class="sidebar-primary"></div>
  <div class="sidebar-secondary"></div>
  <div class="content-area"></div>
  <div class="sidebar-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 3 4 1 at 768px);
@include add-grid(1 1.618 4.236 1 at 1024px);
@include add-grid(12 at 1200px);

@include add-gutter(0.1);
@include add-gutter(1/20 at 768px);
@include add-gutter(1/3 at 1024px);

 
.container {
  max-width: 1200px;
  margin: 0 auto;
}
.sidebar-primary {
  height: 100vh;
  background: #FA1E07;
  @include breakpoint(480px) {
    @include grid-span (1, 1);
  }
  @include breakpoint(768px) {
    @include grid-span(1,1);
  }
  @include breakpoint(1024px) {
    @include grid-span(1, 1);
  }
}
 
.sidebar-secondary {
  height: 100vh;
  background: #520E4B;
  @include breakpoint(480px) {
    display: none;  
  }
  @include breakpoint(768px) {
    display: block;
    @include grid-span(1,2);
  }
  @include breakpoint(1024px) {
    @include grid-span(1, 2);
  }
}
 
.content-area {
  height: 100vh;
  background: #080808;
  @include breakpoint(480px) {
    @include grid-span(1,2);
  }
  @include breakpoint(768px) {
    @include grid-span(1,3);
  }
  @include breakpoint(1024px) {
    @include grid-span(1, 3);
  }
}
 
.sidebar-tertiary {
  height: 100vh;
  background: #FAE503;
  @include breakpoint(480px) {
    display: none;
  }
  @include breakpoint(768px) {
    @include grid-span(1,3);
    display: block;
  }
  @include breakpoint(1024px) {
    @include grid-span(1, 4);
  }
}

SassMeister-output.css

.container {
  max-width: 1200px;
  margin: 0 auto;
}

.sidebar-primary {
  height: 100vh;
  background: #FA1E07;
}
@media (min-width: 480px) {
  .sidebar-primary {
    width: 19.60784%;
    float: left;
    margin-right: -100%;
    margin-left: 0;
    clear: none;
  }
}
@media (min-width: 768px) {
  .sidebar-primary {
    width: 10.92896%;
    float: left;
    margin-right: -100%;
    margin-left: 0;
    clear: none;
  }
}
@media (min-width: 1024px) {
  .sidebar-primary {
    width: 11.29433%;
    float: left;
    margin-right: -100%;
    margin-left: 0;
    clear: none;
  }
}

.sidebar-secondary {
  height: 100vh;
  background: #520E4B;
}
@media (min-width: 480px) {
  .sidebar-secondary {
    display: none;
  }
}
@media (min-width: 768px) {
  .sidebar-secondary {
    display: block;
    width: 32.78689%;
    float: left;
    margin-right: -100%;
    margin-left: 11.47541%;
    clear: none;
  }
}
@media (min-width: 1024px) {
  .sidebar-secondary {
    width: 18.27423%;
    float: left;
    margin-right: -100%;
    margin-left: 15.05911%;
    clear: none;
  }
}

.content-area {
  height: 100vh;
  background: #080808;
}
@media (min-width: 480px) {
  .content-area {
    width: 78.43137%;
    float: right;
    margin-left: 0;
    margin-right: 0;
    clear: none;
  }
}
@media (min-width: 768px) {
  .content-area {
    width: 43.71585%;
    float: left;
    margin-right: -100%;
    margin-left: 44.80874%;
    clear: none;
  }
}
@media (min-width: 1024px) {
  .content-area {
    width: 47.84278%;
    float: left;
    margin-right: -100%;
    margin-left: 37.09811%;
    clear: none;
  }
}

.sidebar-tertiary {
  height: 100vh;
  background: #FAE503;
}
@media (min-width: 480px) {
  .sidebar-tertiary {
    display: none;
  }
}
@media (min-width: 768px) {
  .sidebar-tertiary {
    width: 43.71585%;
    float: left;
    margin-right: -100%;
    margin-left: 44.80874%;
    clear: none;
    display: block;
  }
}
@media (min-width: 1024px) {
  .sidebar-tertiary {
    width: 11.29433%;
    float: right;
    margin-left: 0;
    margin-right: 0;
    clear: none;
  }
}

SassMeister-rendered.html

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