A Sass mixin that creates media query declarations based on $map keys and values

sass-mq-mixin.scss

// Media Query Breakpoints – Breakpoint values should be in ems, which will allow triggering when users zoom.
// Per the W3C, relative units in media query declarations are based on the initial value of :root, which is 16px
// e.g., font-size: 1em = 1rem = 16px = 100%;
// http://www.w3.org/TR/css3-mediaqueries/#units
// TODO: look into x-small and small values for 4-inch mobile devices
$screen-sm: 0; // 0px
$screen-md: 40em; // 640px
$screen-lg: 64em; // 1024px

$breakpoints: (
  small: $screen-sm,
  medium: $screen-md,
  large: $screen-lg
);

// breakpoint - Media query declaration using map
// Required: $breakpoint - valid key from $breakpoints map
// TODO: consider creating orientation options
@mixin breakpoint($breakpoint) {
  @if map-has-key($breakpoints, $breakpoint) {
    @if $breakpoint == 'small' {
      @media only screen and (max-width: map-get($breakpoints, medium)) {
        @content;
      }
    }
    @else if $breakpoint == 'medium' {
      @media only screen and (min-width: map-get($breakpoints, medium)) {
        @content;
      }
    }
    @else if $breakpoint == 'large' {
      @media only screen and (min-width: map-get($breakpoints, large)) {
        @content;
      }
    }
  }
  
  @else {
    @warn 'Not a valid breakpoint: ' + $breakpoint;
  }
}