Sass @media query mixin

sass-media-query-mixin.scss

// ----
// Sass (v3.3.12)
// Compass (v1.0.0.alpha.21)
// ----

// Breakpoints map
// @type Map
$breakpoints: (
  // Regular breakpoints
  "small": "(max-width: 500px)",
  "medium": "(max-width: 700px)",
  "large": "(max-width: 800px)",
  "extra-large": "(max-width: 1280px)",
  
  // reverse breakpoints
  "reverse-small": "(min-width: 501px)",
  "reverse-medium": "(min-width: 701px)",
  "reverse-large": "(min-width: 801px)",
  "reverse-extra-large": "(min-width: 1281px)",
  
  // Exclusive breakpoints
  "exclusive-small": "(max-width: 500px)",
  "exclusive-medium": "(min-width: 501px) and (max-width: 800px)",
  "exclusive-large": "(min-width: 801px) and (max-width: 1280px)",
  
  // Extra breakpoints
  "iOS": "(min-device-width: 768px) and (max-device-width: 1024px), (max-device-width: 480px)"
) !default;

// Enable/disable media queries
// @type Bool
$media-queries: true !default;

// Output a media query named after `$point`.
// @param {String} $point
// @requires $breakpoints
// @requires $media-queries
@mixin breakpoint($point) {
  $query: map-get($breakpoints, $point);
  
  @if not $query {
    @warn "Oh shit! You are requesting an invalid breakpoint: `#{$point}`. :(";
  }
  
  @else if $media-queries {
    @media #{$query} {
      @content;
    }
  }
}


// Example Usage 
test {
  color: red;
  
  @include breakpoint(small) {
    color: blue;
  }
  
  @include breakpoint(iOS) {
    color: purple;
  }
}

Credit: http://codepen.io/chriscoyier/blog/codepens-css
Hugo's update: http://sassmeister.com/gist/1a0a43f1511b9bd75adf