Media query sass mixin

_media.scss

$breakpoints: (
  xsmall: 30em, // ~ 480px
  small: 42.5em, // ~ 680px
  pad: 50em, // ~ 800px
  lap: 62.5em, // ~ 1000px
  desk: 80em // ~ 1280px
) !default;

@mixin above($bpname) {
  $breakpoint: map-get($breakpoints, $bpname);
  @if $breakpoint == null {
    $breakpoint: $bpname;
  }
  @media only screen and (min-width: $breakpoint) {
    @content;
  }
}

@mixin below($bpname) {
  $breakpoint: map-get($breakpoints, $bpname);
  @if $breakpoint == null {
    $breakpoint: $bpname;
  }
  @media not screen and (min-width: $breakpoint) {
    @content;
  }
}