Cacher is the code snippet organizer for pro developers

// Screen breakpoints
// ==============================
$screen-xxs: 20em;
$screen-xs: 30rem;
$screen-sm: 48rem;
$screen-md: 64rem;
$screen-lg: 75rem;
$screen-xl: 90rem;

// Screen sizes
// ==============================
@mixin screen-max($max-width) {
  @media screen and (max-width: $max-width) {
    @content;
  }
}

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

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

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

// Breakpoint Mixin
@mixin breakpoint($min: 0, $max: 0) {
  $type: type-of($min);

  @if $type == string {
    @if $min == 'xxs' {
      @include screen-min($screen-xxs) {
        @content;
      }
    }
    @else if $min == 'xs' {
      @include screen-min($screen-xs) {
        @content;
      }
    }
    @else if $min == 'sm' {
      @include screen-min($screen-sm) {
        @content;
      }
    }
    @else if $min == 'md' {
      @include screen-min($screen-md) {
        @content;
      }
    }
    @else if $min == 'lg' {
      @include screen-min($screen-lg) {
        @content;
      }
    }
    @else if $min == 'xl' {
      @include screen-min($screen-xl) {
        @content;
      }
    }
  }
  @else if $type == number {
    @include device-range($min, $max) {
      @content;
    }
  }
}