Debug SCSS mixin for easier CSS debugging (https://codepen.io/anon/pen/mwaxro)

debug.scss

$colors: (red, blue, green, yellow, gray);
$colors-index: 0;

@mixin mark($type, $color) {
  @if $type == outline {
    outline: 5px solid $color;
  }
  @else {
    background-color: $color;
  }
}

@function get-current-color($colors, $colors-index) {
  $colors-length: length($colors);
  $current-base-color-index: $colors-index % $colors-length + 1;
  $current-base-color: nth($colors, $current-base-color-index);
  $current-color: darken($current-base-color, floor($colors-index / $colors-length) * 10%);
  
  @return $current-color;
}

/*
  Use this mixin for debugging CSS rules.
*/
@mixin debug($selector, $mark-type: fill, $message: 'DEBUG') {
  #{$selector}, .debug {
    #{--debug-message}: $message; 
    $current-color: get-current-color($colors, $colors-index);
    @include mark($mark-type, $current-color);
    @content;
  }
  
  $colors-index: $colors-index + 1 !global;
}

example.html

<!-- CodePen: https://codepen.io/anon/pen/mwaxro -->

<div class="box-1 box"></div>
<div class="box-2 box"></div>
<div class="box-3 box"></div>
<div class="box-4 box"></div>
<div class="box-5 box"></div>
<div class="box-6 box"></div>
<div class="box-7 box"></div>

example.scss

.box {
  width: 50px;
  height: 50px;
}

.box-5 {
  width: 60px;
}

@include debug(".box-1", $mark-type: background);
/*
.box-1, .debug {
  --debug-message: "DEBUG";
  background-color: red;
}
*/
@include debug(".box-5", $message: 'HTML Element should be bigger.');
/*
.box-5, .debug {
  --debug-message: "HTML Element should be bigger.";
  background-color: blue;
}
*/
@include debug(".box-2");

@include debug(".box-7");
@include debug(".box-6", $mark-type: outline);
/*
.box-6, .debug {
  --debug-message: "DEBUG";
  outline: 5px solid gray;
}
*/
@include debug(".box-4");