Example SCSS breakpoint variables

_variables.scss

// takes a em value and returns the value 1 less pixel
@function rev($unit) {
  @return $unit - (1/16);
}

// ****************** //
// *  Breakpoints   * //
// ****************** //

$mq-xsmall: 30em; // 480px
$mq-small: 40em; // 640px
$mq-medium: 48em; // 768px
$mq-large: 64em; // 1024px
$mq-xlarge: 80em; // 1280
$mq-site-max: 96em; // 1536px
$site-max-width: ( $mq-site-max / 1em ) * 16px;

$screen: "only screen";

$mq-landscape: "#{$screen} and (orientation: landscape)";
$mq-portrait: "#{$screen} and (orientation: portrait)";

$mq-xsmall-up:   "#{$screen}";
$mq-xsmall-down: "#{$screen} and (max-width: #{rev($mq-small)})";
$mq-xsmall-only: $mq-xsmall-down;

$mq-small-up:   "#{$screen} and (min-width: #{$mq-small})";
$mq-small-down: "#{$screen} and (max-width: #{rev($mq-medium)})";
$mq-small-only: "#{$mq-small-up} and (max-width: #{rev($mq-medium)})";

$mq-medium-up:   "#{$screen} and (min-width: #{$mq-medium})";
$mq-medium-down: "#{$screen} and (max-width: #{rev($mq-large)})";
$mq-medium-only: "#{$mq-medium-up} and (max-width: #{rev($mq-large)})";

$mq-large-up:   "#{$screen} and (min-width: #{$mq-large})";
$mq-large-down: "#{$screen} and (max-width: #{rev($mq-xlarge)})";
$mq-large-only: "#{$mq-large-up} and (max-width: #{rev($mq-xlarge)})";

$mq-xlarge-up:   "#{$screen} and (min-width: #{$mq-xlarge})";
$mq-xlarge-down: "#{$screen} and (max-width: #{rev($mq-site-max)})";
$mq-xlarge-only: "#{$mq-xlarge-up} and (max-width: #{rev($mq-site-max)})";

$mq-site-max-up:   "#{$screen} and (min-width: #{$mq-site-max})";
$mq-site-max-down: "#{$screen}";
$mq-site-max-only: "#{$mq-site-max-up}";

/////////////////
// EXAMPLE USE //
/////////////////

@media #{$mq-large-up} {
  .thing {
    display: block;
  }
}

/////////////////
// END EXAMPLE //
/////////////////