Generated by SassMeister.com.

SassMeister-input.scss

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

// Breakpoints map
// @type Map
$breakpoints: (
  // Regular breakpoints
  "baby-bear": "(max-width: 500px)",
  "mama-bear": "(max-width: 700px)",
  "papa-bear": "(max-width: 800px)",
  "super-bear": "(max-width: 1280px)",
  
  // Reverso breakpoints
  "reverso-baby-bear": "(min-width: 501px)",
  "reverso-mama-bear": "(min-width: 701px)",
  "reverso-papa-bear": "(min-width: 801px)",
  "reverso-super-bear": "(min-width: 1281px)",
  
  // Exclusive breakpoints
  "exclusive-baby-bear": "(max-width: 500px)",
  "exclusive-mama-bear": "(min-width: 501px) and (max-width: 800px)",
  "exclusive-papa-bear": "(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
$MQs: true !default;

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

test {
  color: red;
  
  @include breakpoint(baby-bear) {
    color: blue;
  }
  
  @include breakpoint(iOS) {
    color: purple;
  }
}

SassMeister-output.css

test {
  color: red;
}
@media (max-width: 500px) {
  test {
    color: blue;
  }
}
@media (min-device-width: 768px) and (max-device-width: 1024px), (max-device-width: 480px) {
  test {
    color: purple;
  }
}