Generated by SassMeister.com.

SassMeister-input-HTML.html

<div class="foo">
  Barley sour/acidic noble hops additive? Hop back keg degrees plato pitch crystal malt, barley. Crystal malt, mead, dry hopping, additive autolysis bung. Top-fermenting yeast scotch ale length fermentation krug crystal malt dry hopping! "Brewhouse craft centennial maris otter."
</div>

SassMeister-input.scss

// ----
// Sass (v3.3.10)
// Compass (v1.0.0.alpha.20)
// Breakpoint (v2.4.2)
// Singularity.gs (v1.2.1)
// ----

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

/***   Breakpoints   *** */
$breakpoint-hamburger: 20em;
$breakpoint-tabs: 36.25em;
$breakpoint-twocolumn: 56.25em;
$breakpoint-fullfeatures: 68.75em;

//** Example ***
.foo {
  padding: 10px;
  color: white;
  @include breakpoint($breakpoint-hamburger) {
    background: blue;
    &:after {
      content: 'This is the hamburger breakpoint';
    }
  }

  @include breakpoint($breakpoint-tabs) {
    background: red;
    &:after {
      content: 'This is the tabs breakpoint';
    }
  }
}

SassMeister-output.css

/***   Breakpoints   *** */
.foo {
  padding: 10px;
  color: white;
}
@media (min-width: 20em) {
  .foo {
    background: blue;
  }
  .foo:after {
    content: 'This is the hamburger breakpoint';
  }
}
@media (min-width: 36.25em) {
  .foo {
    background: blue;
  }
  .foo:after {
    content: 'This is the tabs breakpoint';
  }
}

SassMeister-rendered.html

<div class="foo">
  Barley sour/acidic noble hops additive? Hop back keg degrees plato pitch crystal malt, barley. Crystal malt, mead, dry hopping, additive autolysis bung. Top-fermenting yeast scotch ale length fermentation krug crystal malt dry hopping! "Brewhouse craft centennial maris otter."
</div>