An example of using the Breakpoint extension for Sass & Compass

SassMeister-input-HTML.haml

%section.main
    %section.primary-content
        %h1 About Us
        %p.intro Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris orci mi, molestie quis congue ac, condimentum sit amet mauris. Curabitur a nisi nec arcu facilisis iaculis sit amet ultricies ligula.
    %aside.secondary-content
        %nav.secondary-navigation
            %ul
                %li
                    %a{:href => "#"} Staff
                %li
                    %a{:href => "#"} History
                %li
                    %a{:href => "#"} Company Culture
                %li
                    %a{:href => "#"} Contact Us

SassMeister-input.scss

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

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

// let breakpoint convert our px values to em values
$breakpoint-to-ems: true;

// declare some variables for our mq's
$bp-m: 600px;
$bp-l: 800px;

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

.primary-content {
    background-color: red;
    padding: 0.5em;
    
    @include breakpoint($bp-m) {
        background-color: yellow;
        display: inline;
        float: left;
        margin-right: 1.5%;
        width: 60%;
    }
}

.secondary-content {
    background-color: grey;
    padding: 0.5em;
    
    @include breakpoint($bp-m) {
        background-color: purple;
        display: inline;
        float: left;
        width: 38.5%;
    }
}

.secondary-navigation {
    a {
        color: #fff;
    }
}

SassMeister-output.css

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

.primary-content {
  background-color: red;
  padding: 0.5em;
}
@media (min-width: 37.5em) {
  .primary-content {
    background-color: yellow;
    display: inline;
    float: left;
    margin-right: 1.5%;
    width: 60%;
  }
}

.secondary-content {
  background-color: grey;
  padding: 0.5em;
}
@media (min-width: 37.5em) {
  .secondary-content {
    background-color: purple;
    display: inline;
    float: left;
    width: 38.5%;
  }
}

.secondary-navigation a {
  color: #fff;
}

SassMeister-rendered.html

<section class='main'>
  <section class='primary-content'>
    <h1>About Us</h1>
    <p class='intro'>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris orci mi, molestie quis congue ac, condimentum sit amet mauris. Curabitur a nisi nec arcu facilisis iaculis sit amet ultricies ligula.</p>
  </section>
  <aside class='secondary-content'>
    <nav class='secondary-navigation'>
      <ul>
        <li>
          <a href='#'>Staff</a>
        </li>
        <li>
          <a href='#'>History</a>
        </li>
        <li>
          <a href='#'>Company Culture</a>
        </li>
        <li>
          <a href='#'>Contact Us</a>
        </li>
      </ul>
    </nav>
  </aside>
</section>