Named mediaquery indicator

gistfile1.txt

// More about that approach: http://bigger-on-the-inside.net/articles/named-mediaquery-indicator

/* For example in your project wide settings partial */

@mixin mqindicator($mqname) {
	@if $debug == true {
		body:before {
			position: fixed;
			top: 0;
			right: 0;
			z-index: 100000 ;
			display: inline-block;
			padding: 5px 10px;
			background: red;
			color: #fff;
			content: ''; // resetting
			content: $mqname;
		}
	}
}

/* Actual breakpoints, preferably in their own partials. 
   Find an example for the mixin breakpoint() and config
   here: http://codepen.io/marcus/pen/azmage */

@include breakpoint('beta') {

  @include mqindicator('beta');
  
  // Other rules...
}

@include breakpoint('alpha') {

  @include mqindicator('alpha');
  
  // Other rules...

}