Grouping don't work, eg. a, b, c { color: white; }

[sandstrom]

This is an illustrative example of my problem, below is real code/output.

// less a, b, c { color:white; }

// css output a { color:white; } b { color:white; } c { color:white; }

REAL EXAMPLE:

LESS CODE div.box > h1, div.box > h2, div.box > h3, div.box > h4, div.box > h5, div.box > h6, div.box > div.header { background-color:rgb(230,230,230); padding:1em; .topRadius; }

CSS RESULTS (AFTER PARSING WITH LESS) div.box > h1 { background-color: #e6e6e6; padding: 1em; -webkit-border-top-left-radius: 3px; -webkit-border-top-right-radius: 3px; -moz-border-radius-topleft: 3px; -moz-border-radius-topright: 3px; -khtml-border-top-left-radius: 3px; -khtml-border-top-right-radius: 3px; border-top-left-radius: 3px; border-top-right-radius: 3px; } div.box > h2 { background-color: #e6e6e6; padding: 1em; -webkit-border-top-left-radius: 3px; -webkit-border-top-right-radius: 3px; -moz-border-radius-topleft: 3px; -moz-border-radius-topright: 3px; -khtml-border-top-left-radius: 3px; -khtml-border-top-right-radius: 3px; border-top-left-radius: 3px; border-top-right-radius: 3px; } div.box > h3 { background-color: #e6e6e6; padding: 1em; -webkit-border-top-left-radius: 3px; -webkit-border-top-right-radius: 3px; -moz-border-radius-topleft: 3px; -moz-border-radius-topright: 3px; -khtml-border-top-left-radius: 3px; -khtml-border-top-right-radius: 3px; border-top-left-radius: 3px; border-top-right-radius: 3px; } div.box > h4 { background-color: #e6e6e6; padding: 1em; -webkit-border-top-left-radius: 3px; -webkit-border-top-right-radius: 3px; -moz-border-radius-topleft: 3px; -moz-border-radius-topright: 3px; -khtml-border-top-left-radius: 3px; -khtml-border-top-right-radius: 3px; border-top-left-radius: 3px; border-top-right-radius: 3px; } div.box > h5 { background-color: #e6e6e6; padding: 1em; -webkit-border-top-left-radius: 3px; -webkit-border-top-right-radius: 3px; -moz-border-radius-topleft: 3px; -moz-border-radius-topright: 3px; -khtml-border-top-left-radius: 3px; -khtml-border-top-right-radius: 3px; border-top-left-radius: 3px; border-top-right-radius: 3px; } div.box > h6 { background-color: #e6e6e6; padding: 1em; -webkit-border-top-left-radius: 3px; -webkit-border-top-right-radius: 3px; -moz-border-radius-topleft: 3px; -moz-border-radius-topright: 3px; -khtml-border-top-left-radius: 3px; -khtml-border-top-right-radius: 3px; border-top-left-radius: 3px; border-top-right-radius: 3px; } div.box > div.header { background-color: #e6e6e6; padding: 1em; -webkit-border-top-left-radius: 3px; -webkit-border-top-right-radius: 3px; -moz-border-radius-topleft: 3px; -moz-border-radius-topright: 3px; -khtml-border-top-left-radius: 3px; -khtml-border-top-right-radius: 3px; border-top-left-radius: 3px; border-top-right-radius: 3px; }

[cloudhead]

a, b, c {color:white} parses to a, b, c { color: white; } on my machine.

I'm aware of the crappy selector grouping on nested/hierarchical selectors though..

[donut]

It only happens with a selector has tags and IDs or class in it.

Less input

a, b, c, body, h2 {
    color: white;
}

#hello, .pinky, .brain {
    color: pink;
}

#hello a, body.pinky, .brain h2 {
    color:  orange;
}

CSS output

a, b, c, body, h2 { color: white; }
#hello, .pinky, .brain { color: pink; }
#hello a { color: orange; }
body.pinky { color: orange; }
.brain h2 { color: orange; }

More discussion in the Google Group: LessEfficient CSS output

[fletom]

It's even worse when you have something like :hover nested inside an a, b, c; it ends up created double the code. Since the .css files we're using theoretically won't be read or edited, I think you should focus a bit more on minifying them, and never mind readability -- save that for the .less file, which we do read and edit.