Generated by SassMeister.com.

SassMeister-input.sass

// ----
// Sass (v3.3.14)
// Compass (v1.0.0.rc.1)
// ----

// Breakpoints map
// @type Map
$breakpoints: ("baby-bear": "(max-width: 500px)", "mama-bear": "(max-width: 700px)", "papa-bear": "(max-width: 800px)", "super-bear": "(max-width: 1280px)", "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-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)","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;
  }
}