assets/stylesheets/mixins/_breakpoints.scss

// ---
// version: 1
// ---

// Breakpoints

// @include breakpoint(sm) {};
@mixin breakpoint($min: 0, $max: 0) {
  $type: type-of($min);

  @if $type == string {
    @if $min == xs {
      // < 544px
      @media only screen and (max-width: $bp-xs) {
        @content;
      }
    } @else if $min == sm {
      // > 544px
      @media only screen and (min-width: $bp-sm) {
        @content;
      }
    } @else if $min == md {
      // > 768px
      @media only screen and (min-width: $bp-md) {
        @content;
      }
    } @else if $min == lg {
      // > 992px
      @media only screen and (min-width: $bp-lg) {
        @content;
      }
    } @else if $min == xl {
      // > 1200px
      @media only screen and (min-width: $bp-xl) {
        @content;
      }
    } @else if $min == 2x {
      @media only screen and (-webkit-min-device-pixel-ratio: 1.5),
        only screen and (min--moz-device-pixel-ratio: 1.5),
        only screen and (min-device-pixel-ratio: 1.5) {
        @content;
      }
    } @else {
      @warn 'Breakpoint mixin supports: xs, sm, md, lg, xl, 2x';
    }
  } @else if $type == number {
    // Allow for custom parameters for min and max size
    $query: "all" !default;
    @if $min != 0 and $max != 0 {
      $query: "only screen and (min-width: #{$min}) and (max-width: #{$max})";
    } // set both min and max
    @else if $min != 0 and $max == 0 {
      $query: "only screen and (min-width: #{$min})";
    } // set just min
    @else if $min == 0 and $max != 0 {
      $query: "only screen and (max-width: #{$max})";
    } // set just max
    @media #{$query} {
      @content;
    }
  }
}