_debug.sass

@mixin debug-label($text, $bg-color:#000000)
  &:before
    top: 0
    right: 0
    position: absolute
    content: $text
    color: #ffffff
    z-index: 100
    padding: 5px 10px 5px 10px
    background-color: $bg-color

@mixin debug-media-queries
  @media(min-width: #{$screen-lg})
    body
      $debug-color: purple
      background: $debug-color
      +debug-label('screen-lg', $debug-color)

  @media(max-width: #{$screen-lg})
    body
      $debug-color: green
      background: $debug-color
      +debug-label('screen-md', $debug-color)

  @media(max-width: #{$screen-md})
    body
      $debug-color: blue
      background: $debug-color
      +debug-label('screen-sm', $debug-color)

  @media(max-width: #{$screen-sm})
    body
      $debug-color: sienna
      background: $debug-color
      +debug-label('screen-ms', $debug-color)

  @media(max-width: #{$screen-xs})
    body
      $debug-color: red
      background: $debug-color
      +debug-label('screen-xs', $debug-color)