more nested less rules - labels component

Created by: ArturKwiatkowski

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.