Generated by SassMeister.com.

SassMeister-input-HTML.html

<h1>Breakpoint</h1>
<ul>
  <li>media query shortcuts</li>
  <li>media query variables</li>
  <li>convert px to ems</li>
  <li>resolution conversion and prefixing</li>
  <li>no-query fallbacks (IE8!)</li>
  <li>media query context inspection (frameworks)</li>
</ul>

<h2>Links</h2>
<ul>
  <li><a href="http://breakpoint-sass.com/">breakpoint-sass.com</a></li>
  <li><a href="https://github.com/Team-Sass/breakpoint">github.com/Team-Sass/breakpoint</a></li>
  <li><a href="http://sassmeister.com/gist/8971166">general examples</a></li>
  <li><a href="https://gist.github.com/canarymason/8971231">Offside Sassmeister</a></li>
  <li><a href="http://codepen.io/codingdesigner/pen/tHpCg">Offside Codepen</a></li>
</ul>

SassMeister-input.scss

// ----
// Sass (v3.3.0.rc.3)
// Compass (v1.0.0.alpha.18)
// Breakpoint (v2.4.1)
// ----

@import "breakpoint";

$bp: 500px;

.rwd {
  width: 100%;
  @include breakpoint($bp) {
    width: 50%;
  }
}
/*******/

// $breakpoint-to-ems: true;
$small: max-width 500px; 
$medium: 501px 750px;
$large: 1200px;

.foo {
  width: 50%;
  @include breakpoint ($small) {
    width: 100%;
  }
  @include breakpoint ($medium) {
    width: 75%;
  }
  @include breakpoint ($large) {
    width: 60%;
  }
}
/*******/

$nav-horizontal: 500px;

nav {
  @include breakpoint($nav-horizontal) {
    border-top: 1px solid black;
  }
  li {
    display: block;
    @include breakpoint($nav-horizontal) {
      display: inline;
    }
  }
}

$medium-text: height 700px 999px;
$medium-text: (height 700px 999px) (orientation landscape), ('not screen') (orientation portrait);
$tall-text: min-height 1000px;

h1.hero {
  font-size: 2em;
  @include breakpoint($medium-text) {
    font-size: 3em;
  }
  @include breakpoint($tall-text) {
    font-size: 4em;
  }
}
/*******/


$hidpi: min-resolution 1.5dppx;

h1 {
  font-family: georgia;
  @include breakpoint($hidpi) {
    font-family: Didot;
  }
}
/*******/

// $breakpoint-no-query-fallbacks: true;
// $breakpoint-no-queries: true;

$medium: 500px; 
$large: 800px, 'no-query' '.ie8';
.layout {
  width: 100%;
  @include breakpoint($medium) {
    width: 75%;
  }
  @include breakpoint($large) {
    width: 50%;
  }
}



$touch: pointer coarse, 'no-query' '.touch';


.button {
  height: 2em;
  @include breakpoint($touch) {
    border: 2px solid black;
  }
}

/*******/
$basic: 700px (height 600px 800px) (orientation landscape);

#foo {
  @include breakpoint($basic) {
    content: 'min-height:' breakpoint-get-context('min-height');
    content: 'orientation:' breakpoint-get-context('orientation');
    content: 'max-width: ' breakpoint-get-context('max-width');
  }
}

SassMeister-output.css

.rwd {
  width: 100%;
}
@media (min-width: 500px) {
  .rwd {
    width: 50%;
  }
}

/*******/
.foo {
  width: 50%;
}
@media (max-width: 500px) {
  .foo {
    width: 100%;
  }
}
@media (min-width: 501px) and (max-width: 750px) {
  .foo {
    width: 75%;
  }
}
@media (min-width: 1200px) {
  .foo {
    width: 60%;
  }
}

/*******/
@media (min-width: 500px) {
  nav {
    border-top: 1px solid black;
  }
}
nav li {
  display: block;
}
@media (min-width: 500px) {
  nav li {
    display: inline;
  }
}

h1.hero {
  font-size: 2em;
}
@media (min-height: 700px) and (max-height: 999px) and (orientation: landscape), not screen and (orientation: portrait) {
  h1.hero {
    font-size: 3em;
  }
}
@media (min-height: 1000px) {
  h1.hero {
    font-size: 4em;
  }
}

/*******/
h1 {
  font-family: georgia;
}
@media (min-resolution: 1.5dppx), (-webkit-min-device-pixel-ratio: 1.5), (min--moz-device-pixel-ratio: 1.5), (min-resolution: 144dpi) {
  h1 {
    font-family: Didot;
  }
}

/*******/
.layout {
  width: 100%;
}
@media (min-width: 500px) {
  .layout {
    width: 75%;
  }
}
@media (min-width: 800px) {
  .layout {
    width: 50%;
  }
}

.button {
  height: 2em;
}
@media (pointer: coarse) {
  .button {
    border: 2px solid black;
  }
}

/*******/
@media (min-width: 700px) and (min-height: 600px) and (max-height: 800px) and (orientation: landscape) {
  #foo {
    content: "min-height:" 600px;
    content: "orientation:" landscape;
    content: "max-width: " false;
  }
}

SassMeister-rendered.html

<h1>Breakpoint</h1>
<ul>
  <li>media query shortcuts</li>
  <li>media query variables</li>
  <li>convert px to ems</li>
  <li>resolution conversion and prefixing</li>
  <li>no-query fallbacks (IE8!)</li>
  <li>media query context inspection (frameworks)</li>
</ul>

<h2>Links</h2>
<ul>
  <li><a href="http://breakpoint-sass.com/">breakpoint-sass.com</a></li>
  <li><a href="https://github.com/Team-Sass/breakpoint">github.com/Team-Sass/breakpoint</a></li>
  <li><a href="http://sassmeister.com/gist/8971166">general examples</a></li>
  <li><a href="https://gist.github.com/canarymason/8971231">Offside Sassmeister</a></li>
  <li><a href="http://codepen.io/codingdesigner/pen/tHpCg">Offside Codepen</a></li>
</ul>