Generated by SassMeister.com.

SassMeister-input-HTML.haml

.container
  %h1 Better Media Queries in Sass
  
  %section.primary
    %h2 Primary Content Here!
    %p Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse adipiscing lacinia mi eget aliquet. Nunc non hendrerit lectus. Vestibulum nulla quam, consectetur nec condimentum eget, adipiscing lacinia dui. Suspendisse faucibus semper diam, id accumsan nunc lobortis ac. Morbi ut luctus eros, et posuere mauris. Mauris aliquam, est in bibendum lacinia, nisi diam fringilla eros, ac porttitor nisi massa sed lorem.
    %p Ut vel est nisl. Donec laoreet laoreet felis, ac imperdiet ligula faucibus eget. Vivamus nec sem ornare, cursus nisi eu, molestie nisi. Ut pretium arcu in tincidunt cursus. Proin vehicula magna urna, eu auctor nisl rhoncus viverra. Phasellus eu justo non urna sollicitudin aliquam.
    %h3 Yet Another Heading
    %p Nullam consectetur et nisi at aliquam. Nullam tempor lacinia aliquet. Aenean luctus ipsum a congue interdum. Etiam rutrum lorem at magna dignissim, non eleifend libero hendrerit. Proin eu dictum ante. Vivamus venenatis facilisis ligula in fermentum. Suspendisse pellentesque nunc id tristique commodo. Aenean luctus gravida enim quis tempus. Duis molestie dictum velit, at luctus quam blandit sit amet. Nam nec justo mauris.
  %aside.sidebar
    %h2 Here's My Sidebar
    %article.sidebar--callout
      %h3.sidebar--callout--title Fancy Promotion
      %p Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse adipiscing lacinia mi eget aliquet. Nunc non hendrerit lectus!
      %a.sidebar-callout--readmore{:href => "#"} Read More

SassMeister-input.scss

// ----
// Sass (v3.3.4)
// Compass (v1.0.0.alpha.18)
// Breakpoint (v2.4.2)
// ----

@import "compass";
@import "breakpoint";

// mq vars (for breakpoint)
$breakpoint-to-ems: true;
$bp-s: 400px;
$bp-m: 600px;
$bp-l: 800px;
$bp-xl: 960px;
$bp-xxl: 1100px;

* {
  @include box-sizing(border-box);
}

.container {
  @include clearfix;
  @include box-shadow(0px 0px 5px 0px rgba(50, 50, 50, 0.79));
  margin: 0 auto;
  max-width: 81.25em;
  padding: 1.5em;
  width: 90%;
}
.primary {
  @include breakpoint($bp-m) {
    float: left;
    margin-right: 3.5%;
    width: 65%;
  }
}

.sidebar {
  @include breakpoint($bp-m) {
    border-left: 1px #ccc solid;
    float: left;
    padding-left: 2em;
    width: 25%;
  }
}

SassMeister-output.css

* {
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}

.container {
  overflow: hidden;
  *zoom: 1;
  -moz-box-shadow: 0px 0px 5px 0px rgba(50, 50, 50, 0.79);
  -webkit-box-shadow: 0px 0px 5px 0px rgba(50, 50, 50, 0.79);
  box-shadow: 0px 0px 5px 0px rgba(50, 50, 50, 0.79);
  margin: 0 auto;
  max-width: 81.25em;
  padding: 1.5em;
  width: 90%;
}

@media (min-width: 37.5em) {
  .primary {
    float: left;
    margin-right: 3.5%;
    width: 65%;
  }
}

@media (min-width: 37.5em) {
  .sidebar {
    border-left: 1px #ccc solid;
    float: left;
    padding-left: 2em;
    width: 25%;
  }
}

SassMeister-rendered.html

<div class='container'>
  <h1>Better Media Queries in Sass</h1>
  <section class='primary'>
    <h2>Primary Content Here!</h2>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse adipiscing lacinia mi eget aliquet. Nunc non hendrerit lectus. Vestibulum nulla quam, consectetur nec condimentum eget, adipiscing lacinia dui. Suspendisse faucibus semper diam, id accumsan nunc lobortis ac. Morbi ut luctus eros, et posuere mauris. Mauris aliquam, est in bibendum lacinia, nisi diam fringilla eros, ac porttitor nisi massa sed lorem.</p>
    <p>Ut vel est nisl. Donec laoreet laoreet felis, ac imperdiet ligula faucibus eget. Vivamus nec sem ornare, cursus nisi eu, molestie nisi. Ut pretium arcu in tincidunt cursus. Proin vehicula magna urna, eu auctor nisl rhoncus viverra. Phasellus eu justo non urna sollicitudin aliquam.</p>
    <h3>Yet Another Heading</h3>
    <p>Nullam consectetur et nisi at aliquam. Nullam tempor lacinia aliquet. Aenean luctus ipsum a congue interdum. Etiam rutrum lorem at magna dignissim, non eleifend libero hendrerit. Proin eu dictum ante. Vivamus venenatis facilisis ligula in fermentum. Suspendisse pellentesque nunc id tristique commodo. Aenean luctus gravida enim quis tempus. Duis molestie dictum velit, at luctus quam blandit sit amet. Nam nec justo mauris.</p>
  </section>
  <aside class='sidebar'>
    <h2>Here's My Sidebar</h2>
    <article class='sidebar--callout'>
      <h3 class='sidebar--callout--title'>Fancy Promotion</h3>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse adipiscing lacinia mi eget aliquet. Nunc non hendrerit lectus!</p>
      <a class='sidebar-callout--readmore' href='#'>Read More</a>
    </article>
  </aside>
</div>