SCSS mixin for inline media queries (breakpoints)

_breakpoint.scss

/* #Breakpoint Mixin
================================================== */

$breakpoints: (
  tiny: 320px,
  extra-small: 480px,
  small: 768px,
  medium: 1020px,
  large: 1200px
);

@mixin breakpoint($sizes, $direction: max) {

  @if length($sizes) == 2 {
    $min: nth($sizes, 1);
    $max: nth($sizes, 2);

    @if map-has-key($breakpoints, $min) {
      $min: map-get($breakpoints, $min) + 1px;
    }

    @if map-has-key($breakpoints, $max) {
      $max: map-get($breakpoints, $max);
    }

    @if unitless($max) {
      $max: $max + 0px;
    }

    @if unitless($min) {
      $min: $min + 0px;
    }

    @media screen and (min-width: $min) and (max-width: $max) {
      @content;
    }

  } @else if length($sizes) == 1 {

    @if map-has-key($breakpoints, $sizes) {
      $sizes: map-get($breakpoints, $sizes);

      @if $direction == min {
        $sizes: $sizes + 1px;
      }
    }

    @if unitless($sizes) {
      $sizes: $sizes + 0px;
    }

    @media only screen and (#{$direction}-width: $sizes) {
      @content;
    }
  } @else {
    @error "$sizes should contain 1-2 values.";
  }
}

demo.scss

@charset "UTF-8";

//load _breakpoint.scss file
@import "breakpoint";

.demo {
    &:after {
        //breakpoint key from map, direction
        @include breakpoint(large, min) {
            content: '> large';
            font-size: 250%;
        }

        //pixel-value, direction
        @include breakpoint(1920px, min) {
            color: green;
            content: 'looks like full HD';
            font-size: 500%;
        }

        //two breakpoint keys from map
        @include breakpoint((medium, large)) {
            content: 'medium - large';
            font-size: 250%;
        }

        //two breakpoint keys from map
        @include breakpoint((small, medium)) {
            content: 'small - medium';
            font-size: 200%;
        }

        //two breakpoint keys from map
        @include breakpoint((extra-small, small)) {
            content: 'extra-small, small';
            font-size: 150%;
        }

        //two breakpoint keys from map
        @include breakpoint((tiny, extra-small)) {
            content: 'tiny - extra-small';
            font-size: 100%;
        }

        //integer value, breakpoint key from map
        @include breakpoint((0, tiny)) {
            content: '0 - tiny';
            font-size: 50%;
        }

        //two integer values
        @include breakpoint((0, 150)) {
            color: red;
            content: 'Who views websites at 150px width or less?!';
            font-size: 150%;
        }
    }
}