Debugging mode in Sass

_mixins.scss

/*
  Debugging.
*/
@mixin o($color: red) {
  @include if-debug {
    outline: 1px solid $color;
  }
}

@mixin b($color: blue) {
  @include if-debug {
    background: rgba($color, .1);
  }
}

/*
  Missing elements are things that are not finished in some way.
  @param {String} $message Debugging message.
*/
@mixin missing($message: 'NOT IN STYLEGUIDE') {
  @include if-debug {
    @include position(relative);

    background: rgba(red, .1);

    &:after {
      @include position(absolute, 0px 0px);

      content: $message;
      display: block;
      padding: 5px;
      color: white;
      font-size: 11px;
      font-weight: 400;
      line-height: normal;
      background: rgba(black, .5);
    }
  }
}

/*
  Run a @content block if debugging is on.
*/
@mixin if-debug() {
  @if $debugging-messages {
    @content;
  }
}