WIP Visually Debug Media Queries with Sass

_mq-debug.sass

// This depends on Bourbon Neat now. http://neat.bourbon.io/
// You can refactor for your media query mixin / vars.

@mixin mq-debug($color, $min, $max) {
 @media screen only and (min-width: $min, max-width: $max) {
    &::before {
      background-color: rgba($color, .85);
      content: "$lap: #{$lap-start} - #{$desk-start - 1}";
    }

    &::after {
      background-color: rgba($color, .85);
    }
  }
}

$test-mq: true;

@if $test-mq {
  $color-blue: #2c3e50;
  $color-white: #ecf0f1;
  $color-green: #27ae60;
  $color-red: #c0392b;
  $color-purple: #9b59b6;
  $color-black: #000000;
  
  html {
    position: relative;

    &::before {
      background-color: rgba($color-blue, .85);
      border-bottom-right-radius: .25em;
      color: $color-white;
      content: "none: < #{$lap-start}";
      display: inline-block;
      font-family: monospace;
      font-size: 1.5em;
      font-weight: bold;
      left: 0;
      padding: .5em;
      position: fixed;
      text-shadow: 0 1px 1px rgba($color-black, .9);
      top: 4px;
      z-index: 999;
    }

    &::after {
      background-color: rgba($color-blue, .85);
      content: '';
      display: block;
      height: 4px;
      left: 0;
      position: fixed;
      right: 0;
      top: 0;
      z-index: 999;
    }

    @include media($lap) {
      &::before {
        background-color: rgba($color-green, .85);
        content: "$lap: #{$lap-start} - #{$desk-start - 1}";
      }

      &::after {
        background-color: rgba($color-green, .85);
      }
    }

    @include media($desk) {
      &::before {
        background-color: rgba($color-purple, .85);
        content: "$desk: #{$desk-start} - #{$wall-start - 1}";
      }

      &::after {
        background-color: rgba($color-purple, .85);
      }
    }

    @include media($wall) {
      &::before {
        background-color: rgba($color-red, .85);
        content: "$wall: >= #{$wall-start}";
      }

      &::after {
        background-color: rgba($color-red, .85);
      }
    }
  }
}