Generated by SassMeister.com.

SassMeister-input-HTML.markdown

Hello World

SassMeister-input.scss

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

@import "breakpoint";

$breakpoints: add-breakpoint('full navigation', (801px, 'no-query' true));
$breakpoints: add-breakpoint('narrow navigation', (320px 800px));
$breakpoints: add-breakpoint('mobile', (320px 480px));
  
// add a background 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; // get value between 0 - 360deg

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

   @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;
}

body {
  margin: 0;
  @include list-breaks($breakpoints);

  &:before {
    @include style-breaks;
  }
}

SassMeister-output.css

body {
  margin: 0;
}
@media (min-width: 801px) {
  body:before {
    content: "full navigation";
    background: rgba(102, 255, 102, 0.75);
  }
}
@media (min-width: 320px) and (max-width: 800px) {
  body:before {
    content: "narrow navigation";
    background: rgba(102, 102, 255, 0.75);
  }
}
@media (min-width: 320px) and (max-width: 480px) {
  body:before {
    content: "mobile";
    background: rgba(255, 102, 102, 0.75);
  }
}
body:before {
  line-height: 1.25em;
  padding: .25em 1em;
  color: #333;
  width: 100%;
  display: block;
}

SassMeister-rendered.html

<h1>Hello World</h1>