Generated by SassMeister.com.

SassMeister-input.scss

// ----
// Sass (v3.3.0.rc.1)
// Compass (v0.13.alpha.10)
// ----

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

// Grid definition.
$grids: 2 1;
$gutters: 1/3;
$output: 'isolation';

%container {
  max-width: em(1000px);
  margin-left: em(14px);
  margin-right: em(14px);

  @include breakpoint(em(1000px)) {
    margin: auto;
  }
}

[role="banner"] {
  @extend %container;
}

[role="main"] {
  @extend %container;
}

[role="contentinfo"] {
  @extend %container;
}

.l-page--with-sidebar {
  .l-main {
    @include clearfix(true);
  }

  @include breakpoint(em(700px)) {
    .l-content {
      @include grid-span(1, 1);
    }

    .l-sidebar {
      @include grid-span(1, 2);
    }
  }
}

SassMeister-output.css

.l-page--with-sidebar .l-main {
  /* for IE 6/7 */
  *zoom: expression(this.runtimeStyle.zoom="1", this.appendChild(document.createElement("br")).style.cssText="clear:both;font:0/0 serif");
  /* non-JS fallback */
  *zoom: 1;
}
.l-page--with-sidebar .l-main:before, .l-page--with-sidebar .l-main:after {
  content: ".";
  display: block;
  height: 0;
  overflow: hidden;
}
.l-page--with-sidebar .l-main:after {
  clear: both;
}

[role="banner"], [role="main"], [role="contentinfo"] {
  max-width: em(1000px);
  margin-left: em(14px);
  margin-right: em(14px);
}
@media (min-width: em(1000px)) {
  [role="banner"], [role="main"], [role="contentinfo"] {
    margin: auto;
  }
}

@media (min-width: em(700px)) {
  .l-page--with-sidebar .l-content {
    width: 60%;
    float: left;
    margin-right: -100%;
    margin-left: 0%;
    clear: none;
  }
  .l-page--with-sidebar .l-sidebar {
    width: 30%;
    float: right;
    margin-left: 0;
    margin-right: 0;
    clear: none;
  }
}