Mixin for centralized media query management in SCSS

Mediaquery Mixin

/**
 * Mediaquery collection, used to build responsive features.
 */
$mediaqueries:
  small "only screen",
  medium "only screen and (min-width: 768px)",
  large "only screen and (min-width: 1024px)"
  !default;

@mixin media($query-id) {
  $check: null;
  @each $mediaquery in $mediaqueries {
    @if nth($mediaquery, 1) == $query-id {
      $check: $query-id;
      @media #{nth($mediaquery, 2)} {
        @content;
      }
    }
  }

  @if not $check { @warn "Mediaquery #{id} is not defined." }
}

/**
 * Usage:
 * @include media('small') {
 *  //breakpoint here
 * }
 */