Sass debugging function

Sometimes we need to debug elements to know its composition and optimal way is to change your background color.

to facilitate this process create a small mixin, which receives the items you want to debug.

Here the code snippet:

scss

@mixin debugColor($elements) {
  @each $element in $elements {
    #{$element} {
      background-color: rgb(random(256) -1, random(256) -1, random(256) -1) !important;
    }
  }
}

sass

=debugColor($elements)
  @each $element in $elements
    #{$element}
      background-color:  rgb(random(256)-1, random(256)-1, random(256)-1) !important

Their mode of use is very simple, just call the mixin with the elements to debug.

Example:

I need change the color of body, all divs and a li with class name .menu-item, so the code its

scss

+debugColor('body' 'a' '.menu-item')

sass

@include debugColor('body' 'a' '.menu-item')

easy?

example in jsbin: https://30k.co/e2