twitter/bootstrap — pull request #7641 by Fowowski (2013-04-19 20:18:37+00:00)
Title: 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:

Default

Success

Warning

Danger

Info

--
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?

Default

Success

Warning

Danger

Info

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 > .is(link); // 3. define that this element is treated like [href] element
}
}
&:nth-child(3) {
a {
.label > .label-warning > .is(link);
}
}
&:nth-child(4) {
a {
.label > .label-danger > .is(link);
}
}
&:last-child{
a {
.label > .label-info > .is(link);
}
}
}
}
}

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 .is mixin is a parametric local one which takes one argument - keyword: link:

.label-danger() {
background-color: @label-danger-bg;
.is(@arg) when (@arg = link) {
&[href] {
background-color: darken(@label-danger-bg, 10%);
}
}
}

So basically it checks whether an keyword argument "link" has been passed in LESS mastersheet and IF YES then it will compile extra CSS rules for the [href] attribute. If you would like to style a list-item from first example and labels.less file would lack this parametric mixin then the compiler would give you 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