breakpoint-sass/tests/controls/01_pixel.css

Really Simple Media Queries with Sass

/*
 * Assume `default feature`
 * if only a number
 * $single-pixel-value: 500px;
 * $single-em-value: 30em;
 */
@media (min-width: 500px) {
  .foo {
    content: "$single-pixel-value";
    content: "@media (min-width: 500px)";
  }
}
@media (min-width: 30em) {
  .foo {
    content: "$single-em-value";
    content: "@media (min-width: 30em)";
  }
}
@media (min-width: 500px) {
  .foo {
    content: "$single-pixel-value";
    content: "@media (min-width: 500px)";
  }
}
@media (min-width: 30em) {
  .foo {
    content: "$single-em-value";
    content: "@media (min-width: 30em)";
  }
}
@media (min-width: 500px) {
  .foo {
    content: "$single-pixel-value";
    content: "@media (min-width: 500px)";
  }
}
@media (min-width: 30em) {
  .foo {
    content: "$single-em-value";
    content: "@media (min-width: 30em)";
  }
}