Sass map breakpoints

sass-map-breakpoints.css

/* CSS output */

/* line 3, master.scss */
foo { color: blue; }
@media screen and (max-width: 479px) { /* line 3, sass-map-breakpoints.scss */
  foo { content: xSmall only; } }
@media screen and (min-width: 480px) and (max-width: 749px) { /* line 3, sass-map-breakpoints.scss */
  foo { content: small only; } }
@media screen and (min-width: 750px) and (max-width: 959px) { /* line 3, sass-map-breakpoints.scss */
  foo { content: medium only; } }
@media screen and (min-width: 960px) and (max-width: 1023px) { /* line 3, sass-map-breakpoints.scss */
  foo { content: large only; } }
@media screen and (min-width: 480px) { /* line 3, sass-map-breakpoints.scss */
  foo { content: small up; } }
@media screen and (min-width: 750px) { /* line 3, sass-map-breakpoints.scss */
  foo { content: medium up; } }
@media screen and (min-width: 960px) { /* line 3, sass-map-breakpoints.scss */
  foo { content: large up; } }
@media screen and (max-width: 749px) { /* line 3, sass-map-breakpoints.scss */
  foo { content: small down; } }
@media screen and (max-width: 959px) { /* line 3, sass-map-breakpoints.scss */
  foo { content: medium down; } }
@media screen and (max-width: 1023px) { /* line 3, sass-map-breakpoints.scss */
  foo { content: large down; } }
@media screen { /* line 3, sass-map-breakpoints.scss */
  foo { content: xLarge down; } }

sass-map-breakpoints.scss

// Breakpoints, from smallest to biggest 
$breakpointMap: (
//size-name //min-breakpoint    //columns //gutter
xSmall:     (280px,             4,        30px),
small:      (480px,             4,        30px),
medium:     (750px,             8,        30px),
large:      (960px,             12,       30px),
xLarge:     (1024px,            12,       30px)
);

//Media Mixin
// $size - would be the name of the sizes
// $modifier:
//   up - mobile first
//   only - for only that breakpoint
//   down - desktop first
@mixin media($size, $modifier: up) {
  @if not(index(map-keys($breakpointMap), $size)) {
    @warn "Warning: `#{size}` is not a valid breakpoint name.";
  }
  @else {
    $first: false;
    $last: false;
    @if index(map-keys($breakpointMap), $size) == 1 { $first: true; }
    @if index(map-keys($breakpointMap), $size) == length($breakpointMap) { $last: true; }
    @if not($last) {
      $sizeUp: nth(map-get($breakpointMap, nth(nth($breakpointMap, index(map-keys($breakpointMap), $size) + 1), 1)), 1) - 1 !global;
    }
    @if $modifier == only { 
      @if $first { $modifier: down; }
      @if $last { $modifier: up; }
      @else {
        $mediaBreaks: "and (min-width: #{nth(map-get($breakpointMap, $size), 1)}) and (max-width: #{$sizeUp})" !global;
      }
    }
    @if $modifier == down {
      @if $last { $mediaBreaks: "" !global; }
      @else {
        $mediaBreaks: "and (max-width: #{$sizeUp})" !global;
      }
    }
    @if $modifier == up {
      @if $first { $mediaBreaks: "" !global; }
      @else {
        $mediaBreaks: "and (min-width: #{nth(map-get($breakpointMap, $size), 1)})" !global;
      }
    }
    @media screen #{$mediaBreaks} {
      @content;
    }
  }
}

// Example Usage
@include media($size: xSmall, $modifier: up) {
    color: #fff;
}

Credit: https://github.com/coreyzev/Sass-Map-Breakpoints