Sass debugging function

Picture

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

Related protips

Have a fresh tip? Share with Coderwall community!