Generated by SassMeister.com.

SassMeister-input-HTML.markdown

Hello World

SassMeister-input.scss

// ----
// Sass (v3.3.10)
// Compass (v1.0.0.alpha.20)
// ----

// add a background  and the name of the media query to the media query indicator - dev only 
@mixin list-breaks($breakpoints) {
  
  $i: 0; // counter
  $color: hsla(0, 100%, 70%, .75); // color to adjust (0deg hue: red) (70% lightness: works better with dark text)
  $amount: round( 360 / length($breakpoints) ) * 1deg; // count breakpoints then divide into 360deg: produces a value between 0 - 360deg

  @each $key, $value in $breakpoints {
  $i: $i + $amount; // increment hue

   @include respond-to($key) { 
     
     &:before {
       content: $key;
       background:adjust-hue($color, $i);
     }
   }
  };
}

// Cause you can't extend silently from a media query 
@mixin style-breaks {
  line-height: 1.25em;
  padding: .25em 1em;
  color: #333;
  width: 100%;
  display: block;
}

SassMeister-output.css

@media (min-width: 801px) {
  body:before {
    content: "full navigation";
  }
}
@media (min-width: 320px) and (max-width: 800px) {
  body:before {
    content: "narrow navigation";
  }
}

SassMeister-rendered.html

<h1>Hello World</h1>