Named mediaquery indicator

To start the new year with a snippet (and to end the overly long blog hiatus) I'd like to share a little SCSS debug helper.

If you, like me, follow the route of naming your media queries (in the sense Chris Coyier describes here), and put them into modular SCSS partials, it can be sometimes quite useful to tell at a glance which mediaquery is currently active in a particular browser view. Sure, you could fire up the browsers inspector and look it up, see concrete values and then remember the name of your responsible partial, but alternatively you can implement this:

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

@mixin mqindicator($mqname) {
    @if $debug == true {
        body:before {
            position: fixed;
            top: 0;
            right: 0;
            left: auto;
            bottom: auto;
            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...


This shows a small, fixed indicator, outputting anything you like - although the mediaquery's name makes really sense ;-)


For this to work and in order to not needing to comment this out before deployment, you have to set the variable $debug to true:

$debug: true !global;

If not yet used in your projects, such a variable makes sense serving as a switch for debugging like this. Please note that the !global variable setting requires Ruby Sass and is not yet supported in node-sass.