SASS breakpoint mixin with nested variable map

advanced-media-query-mixin.scss

/**
 * Map-get function for nested variable maps 
 * (required)
 */

@function map-deep-get($map, $keys...) {
  @each $key in $keys {
    $map: map-get($map, $key);
  }
  @return $map;
}


/**
 * Breakpoint variable map
 * Can be adjusted as necessary for your needs
 */

$breakpoints: (
  xs: (
    min: 480px,
    max: 767px,
  ),
  sm: (
    min: 768px,
    max: 991px,
  ),
  md: (
    min: 992px,
    max: 1279px,
  ),
  lg: (
    min: 1280px,
    max: 1440px,
  ),
);


/**
 * Media query mixin
 */

@mixin bp($size, $direction: min) {
  @if map-deep-get($breakpoints, $size, $direction) {
    // min OR max query
    @media (#{$direction}-width: #{map-deep-get($breakpoints, $size, $direction)}) {
      @content;
    }
  } @else {
    // min AND max query
    @media (min-width: #{map-deep-get($breakpoints, $size, min)}) and (max-width: #{map-deep-get($breakpoints, $direction, max)}) {
      @content;
    }
  }
}


/**
 * Usage examples
 */

@include bp(lg) { ... } // @media (min-width: 1280px) { ... }

@include bp(md, max) { ... } // @media (max-width: 1279px) { ... }

@include bp(xs, md) { ... } // @media (min-width: 480px) and (max-width: 1279px) { ... }