Useful and Customizable SASS Mixin for Responsive Breakpoints

useful-sass-mixin-for-responsive-design.scss

// default breakpoints for UIKit
// https://getuikit.com/v2/docs/core.html#breakpoints
$breakpoints: (
  xsmall: 479px,
  small: 767px,
  medium: 959px,
  large: 1199px,
  xlarge: 1200px
);


@mixin breakpoint($breakpoint) {

  // If the key exists in the map
  @if map-has-key($breakpoints, $breakpoint) {

    //  479 pixel and below
    @if $breakpoint == xsmall {
      @media (max-width: map_get($breakpoints,$breakpoint)) {
        @content;
      }
    }

      // 480px - 767px
    @else if $breakpoint == small {
      @media (min-width: (map_get($breakpoints,xsmall)+1)) and (max-width: map_get($breakpoints,$breakpoint)) {
        @content;
      }
    }

      //  768px - 959px
    @else if $breakpoint == medium {
      @media (min-width: (map_get($breakpoints,small)+1)) and (max-width: map_get($breakpoints,$breakpoint)) {
        @content
      }
    }

      // 960px - 1199px
    @else if $breakpoint == large {
      @media (min-width: (map_get($breakpoints,medium)+1)) and (max-width: map_get($breakpoints,$breakpoint)) {
        @content
      }
    }


      // 1200px and up
    @else if $breakpoint == xlarge {
      @media (min-width: (map_get($breakpoints,xlarge))){
        @content;
      }
    }

  }

  // other rules
  @else if $breakpoint == large-and-down {
    @media (max-width: map_get($breakpoints,large)) {
      @content;
    }
  }

  @else if $breakpoint == medium-and-down {
    @media (max-width: map_get($breakpoints,medium)) {
      @content;
    }
  }

  @else if $breakpoint == small-and-down {
    @media (max-width: map_get($breakpoints,small)) {
      @content;
    }
  }

    // If the key doesn't exist in the map
  @else {
    @warn "Unfortunately, no value could be retrieved from `#{$breakpoint}`. "
        + "Available breakpoints are: #{map-keys($breakpoints)}.";
  }

}