$viewports: (
    all: 0px,
    xs: 480px,
    sm: 768px,
    md: 992px,
    lg: 1200px,
    xl: 1400px
);
$viewport-names: map-keys($viewports);

@mixin respond($min, $max: null) {
  @if $max != null {
    @if map-has-key($viewports, $min) and map-has-key($viewports, $max) {
      @media (min-width: #{map-get($viewports, $min)}) and (max-width: #{map-get($viewports, $max) - 1px}) {
        @content;
      }
    }
  } @else if map-has-key($viewports, $min) {
    @media (min-width: #{map-get($viewports, $min)}) {
      @content;
    }
  }
}