Create a gist now

Instantly share code, notes, and snippets.

What would you like to do?
Named mediaquery indicator
// 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...
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment