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.12)
// Compass (v1.0.0.alpha.21)
// Breakpoint (v2.4.6)
// Singularity.gs (v1.2.0.rc.6)
// ----

@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: green;
    &:before {
      color: yellow;
      content: 'This is the hamburger breakpoint --';
    }
  }
  
  @include breakpoint($breakpoint-tabs) {
    background: purple;
    &:before {
      color: yellow;
      content: 'This is the tabs breakpoint --';
    }
  }
  
  @include breakpoint($breakpoint-twocolumn) {
    background: blue;
    &:before {
      color: yellow;
      content: 'This is the twocolumn breakpoint --';
    }
  }

  @include breakpoint($breakpoint-fullfeatures) {
    background: red;
    &:before {
      color: yellow;
      content: 'This is the fullfeatures breakpoint --';
    }
  }
}

SassMeister-output.css

/***   Breakpoints   *** */
.foo {
  padding: 10px;
  color: white;
}
@media (min-width: 20em) {
  .foo {
    background: green;
  }
  .foo:before {
    color: yellow;
    content: 'This is the hamburger breakpoint --';
  }
}
@media (min-width: 36.25em) {
  .foo {
    background: purple;
  }
  .foo:before {
    color: yellow;
    content: 'This is the tabs breakpoint --';
  }
}
@media (min-width: 56.25em) {
  .foo {
    background: blue;
  }
  .foo:before {
    color: yellow;
    content: 'This is the twocolumn breakpoint --';
  }
}
@media (min-width: 68.75em) {
  .foo {
    background: red;
  }
  .foo:before {
    color: yellow;
    content: 'This is the fullfeatures 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>