Simple-breakpoint-reference.scss

$screen-sm-min: 768px;
$screen-xs-max: ($screen-sm-min - 1);

$screen-md-min: 992px;
$screen-sm-max: ($screen-md-min - 1);

$screen-lg-min: 1200px;
$screen-md-max: ($screen-lg-min - 1);

body {
  @media (min-width: $screen-sm-min) {
    background-color: blue;
  }
  // stretchy bit between tablet and desktop
  @media (min-width: $screen-md-min) {
    background-color: red;
  }
  // essentially desktop
  @media (min-width: $screen-lg-min) {
    background-color: pink;
  }
  // desktop first rules
  @media (max-width: $screen-sm-max) {
    background-color: green;
  }
  // desktop first: tablet
  @media (max-width: $screen-sm-max) {
    background-color: yellow;
  }
  // desktop first: mobile
  @media (max-width: $screen-xs-max) {
    background-color: black;
  }
}