Easy media query mixin for multiple breakpoints.

media-query-breakpoints.scss

// Breakpoints - NOTE: use the provided mixins for breakpoint media queries.
$phone-upper-boundary: 768px; // > "phone"
$tablet-upper-boundary: 1200px;
$small-desktop-upper-boundary: 1920px;
$large-desktop-upper-boundary: 2200px; // < "huge desktop"

/**
 * Mixin for adding size media queries. Size should be:
 * - phone-only       - < 768px   (rare use case, use mobile first instead)
 * - tablet-up        - >= 768px
 * - small-desktop-up - >= 1200px
 * - large-desktop-up - >= 1800px
 * - huge-desktop-up  - >= 2200px (rare use case, relatively unused breakpoint)
 * - a custom size    - example: 900px
 *
 * Example:
 * ```scss
 * .my-box {
 *   padding: 10px;
 *
 *   @include for-size(small-desktop-up) {
 *     padding: 20px;
 *   }
 * }
 * ```
 */
@mixin for-size($size) {
  @if $size == phone-only {
    @media (max-width: $phone-upper-boundary - 1) {
      @content;
    }
  } @else if $size == tablet-up {
    @media (min-width: $phone-upper-boundary) {
      @content;
    }
  } @else if $size == small-desktop-up {
    @media (min-width: $tablet-upper-boundary) {
      @content;
    }
  } @else if $size == large-desktop-up {
    @media (min-width: $small-desktop-upper-boundary) {
      @content;
    }
  } @else if $size == huge-desktop-up {
    @media (min-width: $large-desktop-upper-boundary) {
      @content;
    }
  } @else {
    @media (min-width: $size) {
      @content;
    }
  }
}

Inspired by: https://itnext.io/writing-media-queries-with-sass-mixins-3ea591ea3ea4