Cacher is the code snippet organizer for pro developers

$breakpoints: (
	xs: 640px,
	small: 768px,
	medium: 1024px,
	large: 1280px
);

@mixin screen($breakpoint, $mobileFirst: true) {
  @if $mobileFirst {
    @if map-has-key($breakpoints, $breakpoint) {
      @media (min-width: #{map-get($breakpoints, $breakpoint)}) {
        @content;
      }
    }
    @else {
      @media (min-width: $breakpoint) {
        @content;
      }
    }
  }
  @else {
    @if map-has-key($breakpoints, $breakpoint) {
      @media (max-width: #{map-get($breakpoints, $breakpoint)} - 1px) {
        @content;
      }
    }
    @else {
      @media (max-width: $breakpoint - 1px) {
        @content;
      }
    }
  }
}