SCSS Mixin: reveal dom depth

DEPTH.scss

@mixin DEPTH($rootBG:true) {
  html body & {
    @if $rootBG {
      background-color: rgba(0,0,0,.08);
    }
  }
  html body & *                   { background-color: rgba(255,0,0,.08)  ; }
  html body & * *                 { background-color: rgba(0,255,0,.08)  ; }
  html body & * * *               { background-color: rgba(0,0,255,.08)  ; }
  html body & * * * *             { background-color: rgba(255,0,255,.08); }
  html body & * * * * *           { background-color: rgba(0,255,255,.08); }
  html body & * * * * * *         { background-color: rgba(255,255,0,.08); }
  html body & * * * * * * *       { background-color: rgba(255,0,0,.08)  ; }
  html body & * * * * * * * *     { background-color: rgba(0,255,0,.08)  ; }
  html body & * * * * * * * * *   { background-color: rgba(0,0,255,.08)  ; }
}

.foo {
   // root gets bg
   @include DEPTH;
}

.bar {
   // root does *NOT* get bg
  @include DEPTH(false);
}

.DEPTH {
  
  // root gets bg
  @include DEPTH;

  // root does *NOT* get bg
  &--NO-ROOT {
    @include DEPTH(false);
  }
  
}