Sass Media Query Mixin

_mixins.scss

// == Defind breakpoint variables 
//
//##
$screen-xs: 480px !default;
$screen-sm: 768px !default;
$screen-md: 992px !default;
$screen-lg: 1200px !default;

// == Breakpoints map
//
//##
$breakpoints: (
  xs: $screen-xs,
  sm: $screen-sm,
  md: $screen-md,
  lg: $screen-lg
) !default;

// == Media query mixin
//
//## @param String|Boolean
@mixin mq($breakpoint,$min: true) { 
  @if map-has-key($breakpoints, $breakpoint) {
    @if ($min) {
     @media (min-width: #{map-get($breakpoints, $breakpoint)}) {
      @content;
     } 
    } @else {
     @media (max-width: #{map-get($breakpoints, $breakpoint)}) {
      @content;
     }
    }
  }
  @else {
    @warn "Unfortunately, no value could be retrieved from `#{$breakpoint}`. "
        + "Please make sure it is defined in `$breakpoints` map.";
  }
}

// == Usage
//
//## 
@include mq(xs) {
  span {
    color: tomato;
  }
}
@include mq(xs, null) {
  span {
    color: tomato;
  }
}

// == Output
//
//## 
@media (min-width: 480px) {
  span {
    color: tomato;
  }
}
@media (max-width: 480px) {
  span {
    color: tomato;
  }
}