Função de depuração Sass

Às vezes precisamos depurar elementos para saber sua composição e a maneira ideal é mudar a cor de fundo.

para facilitar esse processo crie um pequeno mixin, que recebe os itens que deseja depurar.

Aqui está o snippet de código:

scss

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

atrevimento

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

Seu modo de uso é muito simples, basta chamar o mixin com os elementos para depurar.

Exemplo:

Preciso mudar a cor do corpo , todos os divs e um li com o nome da classe .menu-item , então o código é

scss

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

atrevimento

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

fácil?

exemplo em jsbin: https://30k.co/e2