Skip to content

Instantly share code, notes, and snippets.

What would you like to do?
Named mediaquery indicator
// More about that approach:
/* 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: */
@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