
.debug(@tag: '', @bg: '#000') {
  padding: 0 4px;
  margin-right: 4px;
  color: #fff;
  content: @tag;
  background: @bg;
}

#content {
  h1:before { .debug('H1', #aa0);  }
  h2:before { .debug('H2', #0a0); }
  h3:before { .debug('H3', #00f); }
  h4:before { .debug('H4', #f0f); }
  h5:before { .debug('H4', #0ff); }
  p:before { .debug('P', #0aa); }
  li:before { .debug('LI', #a0a); }
}


.debug(@tag: '', @bg: '#000') {
  padding: 0 4px;
  margin-right: 4px;
  color: #fff;
  content: @tag;
  background: @bg;
}

#content {
  h1:before { .debug('H1', #aa0);  }
  h2:before { .debug('H2', #0a0); }
  h3:before { .debug('H3', #00f); }
  h4:before { .debug('H4', #f0f); }
  h5:before { .debug('H4', #0ff); }
  p:before { .debug('P', #0aa); }
  li:before { .debug('LI', #a0a); }
}

h1, h2, h3, h4 {
  [href^='#'] {
    top: -5px;
    position: relative;
    &:after {
      position: absolute;
      left: 0;
      bottom: -1em;
      display: block;
      font-size: 12px;
      line-height: 12px;
      font-weight: 400;
      color: #aaa;
      content: attr(href);
      white-space: pre;
    }
  }
}

// [debug]:before { .debug('DEBUG', #f00); }

#content [id] {
  display: inline;
  padding: 0 4px;
  color: #fff;
  background: #f00 !important;
  &:after {
    content: attr(id);
  }
}

p [name] {
  padding: 0 4px;
  color: #fff;
  background: #f00 !important;
  &:after {
    content: attr(name);
  }
}

p [href^='#'],
li [href^='#'] {
  padding: 0 4px;
  color: #fff;
  background: #f00 !important;
  &:after {
    content: attr(href);
  }
}



Debug CSS based on attributes.
Debug CSS based on attributes.
