twitter/bootstrap — Issue #1563: Make LESS definitions easier to reuse
Author: benatwork99
Created: 2012-02-02 01:14:33+00:00
State: open

I've noticed this issue with the .btn style in buttons.less but it's probably a more general thing.

In 2.0 RC we had nested style definitions for pseudo-classes and related classes - e.g.
```css
.btn {
&:hover {}
&.info {}
}
```

This enabled me to re-apply those styles easily to other elements with mixins, for example:
```css
.some-selector-for-buttons a {
.btn;
}

Which meant that all the items I'd targeted with that selector would get the .btn styles and the .btn:hover and .btn.info styles etc.

In the 2.0 GA I see that these pseudo classes and related classes have been split into separate blocks like this:
```css
.btn {}
.btn:hover {}
.btn.info {}
```

This has two negative impacts:
1. I'm not able to mixin the pseudo class at all so have to duplicate the CSS styles from .btn:hover in my own code if I want to use those styles.
2. I can mixin the related class but I need to specifically do this for each related class, I don't get them all for free any more.

Was there a good reason behind this change? My first thought is that the nested structure provided better reuse of the LESS definitions. If that's a no-go for some reason, then factoring out the pseudo-class styles into a named class would at least allow for re-use of those styles without duplicating the definition. E.g.:
```css
.btn {}
.btn-hover {//hover styles here}
.btn:hover { .btn-hover; }
```

I could just apply the btn class everywhere but I felt it was neater to select based on structure for parts of the app and leave the markup clean.. Thoughts on this issue appreciated!