Generated by SassMeister.com.

SassMeister-input-HTML.html

<div class="container">
  <header role="header">Header</header>
  <div class="content-wrapper">
    <section class="main-content">
      Main Content
    </section>
    <aside class="sidebar">
      Sidebar
    </aside>
  </div>
  <footer role="contentinfo" class="footer">
    Footer
  </footer>
</div>

SassMeister-input.scss

// ----
// libsass (v3.2.5)
// ----

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

// Symmetric grid with fluid gutters, 1/2 gutter on each side of a column
@include add-grid(12);
@include add-gutter(1/3);
@include add-gutter-style('split');

@mixin clearfix {
  display: table;
  clear: both;
  content: "";
}


header[role="header"],
.content-wrapper,
footer[role="contentinfo"] {
  @include clearfix;
  @include grid-span(12, 1);
  background: gray;
  color: white;
}

/**
 * Using SingularityGS and Breakpoint plugins, create a mobile-first layout
 * where all content regions span 100% the width of the browser on 
 * mobile devices, and split into two columns starting at 768px breakpoint.  
 * See screenshot: https://www.evernote.com/l/ACwBGOwiRhJNdIcFc6kDFNGfEMNjcnxq5Lg
 */

SassMeister-output.css

header[role="header"],
.content-wrapper,
footer[role="contentinfo"] {
  display: table;
  clear: both;
  content: "";
  width: 97.91667%;
  float: right;
  margin-left: 0;
  margin-right: 1.04167%;
  clear: none;
  background: gray;
  color: white;
}

/**
 * Using SingularityGS and Breakpoint plugins, create a mobile-first layout
 * where all content regions span 100% the width of the browser on 
 * mobile devices, and split into two columns starting at 768px breakpoint.  
 * See screenshot: https://www.evernote.com/l/ACwBGOwiRhJNdIcFc6kDFNGfEMNjcnxq5Lg
 */

SassMeister-rendered.html

<div class="container">
  <header role="header">Header</header>
  <div class="content-wrapper">
    <section class="main-content">
      Main Content
    </section>
    <aside class="sidebar">
      Sidebar
    </aside>
  </div>
  <footer role="contentinfo" class="footer">
    Footer
  </footer>
</div>