more nested less rules - labels component

A more nested version of labels component.

When you have an unordered list, single list-item or element which you want to convert magically into a labels through your LESS mastersheet you can do:

    <section>
      <ul>
        <li>Default</li>
        <li>Success</li>
        <li>Warning</li>
        <li>Danger</li>
        <li>Info</li>
      </ul>
    </section>
--
    section {
      ul {
        .list-unstyled; // make this list clean
        li {
          .label; // 1. execute .label props eg. define that this element is styled like via .label class
          &:nth-child(2) {
            .label > .label-success; // 2. execute proper style type eg. like i would use class name .label-success on this elem.
          }
          &:nth-child(3) {
            .label > .label-warning;
          }
          &:nth-child(4) {
            .label > .label-danger;
          }
          &:last-child{
            .label > .label-info;
          }
        }
      }
    }


Labels are cool but having an option to style a clean unordered list through LESS mastersheet which imports bootstrap is even more cool. In above example you can see how simple it is to transform a list-item into a specific label type.

And what if you have anchors inside those list-items which should behave and look as we would attach a specific label class to them?

    <section>
      <ul>
        <li><a href="#">Default</a></li>
        <li><a href="#">Success</a></li>
        <li><a href="#">Warning</a></li>
        <li><a href="#">Danger</a></li>
        <li><a href="#">Info</a></li>
      </ul>
    </section>

Style them like that:

    section {
      ul {
        .list-unstyled; // make this list clean
        li {
          display: inline-block; // tweak the list items to behave as inline-block
          a {
            .label; // 1. execute .label props, define that this element is styled like via class .label
            .label > .a; // 2. because we're styling "a" elements we need to execute hover and focus on them... somehow :)
          }

          //adjusting specific list item "a" elements
          &:nth-child(2) {
            a {
              .label > .label-success > .a; // 3. define that this element is treated like [href] element
            }
          }
          &:nth-child(3) {
            a {
              .label > .label-warning > .a;
            }
          }
          &:nth-child(4) {
            a {
              .label > .label-danger > .a;
            }
          }
          &:last-child{
            a {
              .label > .label-info > .a;
            }
          }
        }
      }
    }

The second example is more difficult. Since we dont want overproduction of CSS code in our first example we need a special mixin (for second example) which will style "a" element particulary as a [href] link.
This mixin is a local one and if used will produce additional css for [href].

    .label-danger() {
      background-color: @label-danger-bg;
      .a() {
        &[href] {
         background-color: darken(@label-danger-bg, 10%);
        }
      }
    }

So basically if you use extra .a() then you'll get additional css for [href]. Withouth this mixin when styling list-item element we could end up with something like this:

    section ul li:nth-child(2)[href] {}

which makes no sense since it's not an anchor element.

The LESS stylesheet differs a lot from the original one but in the end it produces the same compiled CSS code (beside display: inline on .label). It also gives an option for folks who are crazy about their semantics (or too lazy to mess with the HTML class attributes :)) to style their HTML elements to look and behave as bootstrap labels.

I think the docs should describe this whole LESS-side-styling case but I would like to extend it after finishing off other components - if someone else could do that for us in the mean time it would be OK.

Enjoy! 
PS. Im very curious what do you think about this one.

Tested on: Firefox 20.0.1, Chrome 26.0.1410.64 m, Internet Explorer 10.0.9200.16521

edit: i've replaced parametric .is() mixin with local non-parametric .a() mixin because there was really no point in passing any parameter.