Generated by SassMeister.com.

SassMeister-input-HTML.html

<div class="foo">
  <p>Please resize me.</p>
</div>
<div class="baz">
  <p>Please resize me.</p>
</div>

SassMeister-input.scss

// ----
// Sass (v3.4.9)
// Compass (v1.0.1)
// Breakpoint (v2.5.0)
// ----

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

$breakpoint-to-ems: true;

$small: 700px;
$medium: 900px;
$large: 1100px;

$custom-pair: (height 100px 300px);
$pair-portrait: screen 321px 543px, handheld (orientation portrait);
$basic: screen 800px 1200px, min-height 300px, orientation landscape;

.foo {
  background: #00C176;
  content: 'No Media Queries';

  @include breakpoint($small) {
    background: #49007E;
    content: 'Basic Media Query - Small';
  }

  @include breakpoint($medium) {
    background: #FF005B;
    content: 'Basic Media Query - Medium';
  }

  @include breakpoint($large) {
    background: #FF7D10;
    content: 'Basic Media Query - Large';
  }
}

.baz {
  background: #00C176;
  content: 'No Media Queries';

  @include breakpoint($custom-pair) {
    background: #398A87;
    content: 'Custom Pair Media Query - Targeting Height';
  }

  @include breakpoint($pair-portrait) {
    content: 'Screen media type between 300px and 500px OR Handheld media type in Portrait';
  }

  @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');
  }
}

.foo:before {
  content: 'No Media Query';

  @include breakpoint($small) {
    content: 'Basic Media Query - Small';
  }

  @include breakpoint($medium) {
    content: 'Basic Media Query - Medium';
  }

  @include breakpoint($large) {
    content: 'Basic Media Query - Large';
  }
}

.baz:before {
  content: 'No Media Query';

  @include breakpoint($custom-pair) {
    content: 'Custom Pair Media Query - Targeting Height';
  }

  @include breakpoint($pair-portrait) {
    content: 'Screen media type between 300px and 500px OR Handheld media type in Portrait';
  }

  @include breakpoint($basic) {
    content: "I am basic. Check the compiled CSS.";
  }
}


/* Non-layout Styles */

.baz:before,
.foo:before {
  color: #fff;
  display: block;
  padding-top: 1em;
  text-align: center;
  width: 100%;
}

p {
  color: #fff;
  font-size: 3em;
  padding: .15em 0 1em;
  text-align: center;
}

SassMeister-output.css

.foo {
  background: #00C176;
  content: 'No Media Queries';
}
@media (min-width: 43.75em) {
  .foo {
    background: #49007E;
    content: 'Basic Media Query - Small';
  }
}
@media (min-width: 56.25em) {
  .foo {
    background: #FF005B;
    content: 'Basic Media Query - Medium';
  }
}
@media (min-width: 68.75em) {
  .foo {
    background: #FF7D10;
    content: 'Basic Media Query - Large';
  }
}

.baz {
  background: #00C176;
  content: 'No Media Queries';
}
@media (min-height: 6.25em) and (max-height: 18.75em) {
  .baz {
    background: #398A87;
    content: 'Custom Pair Media Query - Targeting Height';
  }
}
@media screen and (min-width: 20.0625em) and (max-width: 33.9375em), handheld and (orientation: portrait) {
  .baz {
    content: 'Screen media type between 300px and 500px OR Handheld media type in Portrait';
  }
}
@media screen and (min-width: 50em) and (max-width: 75em), (min-height: 18.75em), (orientation: landscape) {
  .baz {
    content: "min-height:" false 300px false;
    content: "orientation:" false false landscape;
    content: "max-width: " 1200px false false;
  }
}

.foo:before {
  content: 'No Media Query';
}
@media (min-width: 43.75em) {
  .foo:before {
    content: 'Basic Media Query - Small';
  }
}
@media (min-width: 56.25em) {
  .foo:before {
    content: 'Basic Media Query - Medium';
  }
}
@media (min-width: 68.75em) {
  .foo:before {
    content: 'Basic Media Query - Large';
  }
}

.baz:before {
  content: 'No Media Query';
}
@media (min-height: 6.25em) and (max-height: 18.75em) {
  .baz:before {
    content: 'Custom Pair Media Query - Targeting Height';
  }
}
@media screen and (min-width: 20.0625em) and (max-width: 33.9375em), handheld and (orientation: portrait) {
  .baz:before {
    content: 'Screen media type between 300px and 500px OR Handheld media type in Portrait';
  }
}
@media screen and (min-width: 50em) and (max-width: 75em), (min-height: 18.75em), (orientation: landscape) {
  .baz:before {
    content: "I am basic. Check the compiled CSS.";
  }
}

/* Non-layout Styles */
.baz:before,
.foo:before {
  color: #fff;
  display: block;
  padding-top: 1em;
  text-align: center;
  width: 100%;
}

p {
  color: #fff;
  font-size: 3em;
  padding: .15em 0 1em;
  text-align: center;
}

SassMeister-rendered.html

<div class="foo">
  <p>Please resize me.</p>
</div>
<div class="baz">
  <p>Please resize me.</p>
</div>