Generated by SassMeister.com.

SassMeister-input.scss

// ----
// Sass (v3.3.14)
// Compass (v1.0.3)
// ----

$breakpoints: (
  echo:      400px,
  hotel:     600px,
  kilo:      800px,
  november: 1000px,
  quebec:   1200px,
);

@mixin breakpoint($breakpoint: null, $px-ratio: null, $orientation: null, $breakpoints: $breakpoints){
  $media-query: '';
  
  @if map-has-key($breakpoints, $breakpoint) {
    $breakpoint-min: map-get($breakpoints, $breakpoint);
    $media-query: $media-query + '(min-width: #{$breakpoint-min})'
  } @elseif $breakpoint != null {
    // Warn if value isn't found
    @warn 'Breakpoint #{$breakpoint} couldn\'t be found in breakpoints';
  }
  
  @if $px-ratio != null {
    // Warn if value doesn't seem to be valid
    @if $px-ratio > 10 {
      @if $px-ratio < 1 {
        @warn '#{$px-ratio} does not seem to be a valid value. Should be something like 1, 1.25, 2, 4, etc.'
      }
    }
    $dpi: $px-ratio * 96;
    @if $media-query != '' {
      $media-query: $media-query + ' and ';
    }
    $media-query: $media-query + '(-webkit-min-device-pixel-ratio: #{$px-ratio}), (min-resolution: #{$dpi}dpi)';
  }
  
  @if $orientation != null {
    // Warn if value doesn't seem to be valid
    @if $orientation != landscape {
      @if $orientation != portrait {
        @warn '#{$orientation} doesn\'t seem to be a valid value for "orientation". Should be portrait or landscape.';
      }
    }
    @if $media-query != '' {
      $media-query: $media-query + ' and ';
    }
    $media-query: $media-query + '(orientation: #{$orientation})';
  }
  
  @if $media-query != '' {
    @media #{$media-query} {
      @content;
    }
  }
}

@mixin debug-breakpoints($vertical-position: bottom, $horizontal-position: left, $breakpoints: $breakpoints) {
  // Basic styles for tooltip
  body:before {
    display: block;
    position: fixed;
    z-index: 9999;
    #{$vertical-position}: 0;
    #{$horizontal-position}: 0;
    padding: .7em 1em;
    background: rgba(0, 0, 0, 0.8);
    color: #fff;
    line-height: 1em;
    font-weight: 600;
  }
  
  @each $breakpoint-name, $breakpoint-min in $breakpoints {
    body:before {
      @include breakpoint($breakpoint-name){
        content: '#{$breakpoint-name}';
      }
    }
  }
  
}

@include debug-breakpoints();

body {
  color: red;

  @include breakpoint('hotel', 2) {
    color: purple;
  }

  @include breakpoint(echo, null, landscape){
    color: farts;
  }
  
  @include breakpoint(farts) {
    color: green;
  }

  @include breakpoint(quebec) {
    color: blue;
  }
  
}

SassMeister-output.css

body:before {
  display: block;
  position: fixed;
  z-index: 9999;
  bottom: 0;
  left: 0;
  padding: .7em 1em;
  background: rgba(0, 0, 0, 0.8);
  color: #fff;
  line-height: 1em;
  font-weight: 600;
}

@media (min-width: 400px) {
  body:before {
    content: "echo";
  }
}

@media (min-width: 600px) {
  body:before {
    content: "hotel";
  }
}

@media (min-width: 800px) {
  body:before {
    content: "kilo";
  }
}

@media (min-width: 1000px) {
  body:before {
    content: "november";
  }
}

@media (min-width: 1200px) {
  body:before {
    content: "quebec";
  }
}

body {
  color: red;
}
@media (min-width: 600px) and (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
  body {
    color: purple;
  }
}
@media (min-width: 400px) and (orientation: landscape) {
  body {
    color: farts;
  }
}
@media (min-width: 1200px) {
  body {
    color: blue;
  }
}