Generated by SassMeister.com.

SassMeister-input.scss

// ----
// Sass (v3.3.7)
// Compass (v1.0.0.alpha.18)
// ----

// Breakpoint maps
// @key: name of breakpoint
// @value: map of settings for breakpoint
//   -@key: type of media query
//   -@value: value for current type
// ---
$breakpoints: (
  'tiny':   ( max-width:  767px ),
  'small':  ( min-width:  768px ),
  'medium': ( min-width:  992px ),
  'large':  ( min-width: 1200px ),
  'custom': ( min-height:  40em )
);

// Breakpoint handler
// 1. If breakpoint exists in map
// 2. Make good use of `inspect` function
// 3. If breakpoint doesn't exist in map
// 4. Warn user
// ---
// @param [string] $name: name of breakpoint to call
// ---
@mixin breakpoint($name) {
  @if map-has-key($breakpoints, $name) { // 1
    @media #{inspect(map-get($breakpoints, $name))} { // 2
      @content;
    }
  }
  @else { // 3
    @warn "Couldn't find a breakpoint named `#{$name}`."; // 4
  }
}

// Short alias for `breakpoint`
// ---
@mixin b($name) {
  @include breakpoint($name) {
    @content;
  }
}

// Example
// ---
.element {
  breakpoint: root;
  
  @include breakpoint(tiny) {
    breakpoint: tiny;
  }
  
  @include breakpoint(small) {
    breakpoint: small;
  }
  
  @include breakpoint(medium) {
    breakpoint: medium;
  }
  
  @include breakpoint(large) {
    breakpoint: large;
  }
  
  @include breakpoint(custom) {
    breakpoint: custom;
  }
}

SassMeister-output.css

.element {
  breakpoint: root;
}
@media (max-width: 767px) {
  .element {
    breakpoint: tiny;
  }
}
@media (min-width: 768px) {
  .element {
    breakpoint: small;
  }
}
@media (min-width: 992px) {
  .element {
    breakpoint: medium;
  }
}
@media (min-width: 1200px) {
  .element {
    breakpoint: large;
  }
}
@media (min-height: 40em) {
  .element {
    breakpoint: custom;
  }
}