LESS CSS nesting classes
The &
character has the function of a this
keyword, actually (a thing I did not know at the moment of writing the answer). It is possible to write:
.class1 {
&.class2 {}
}
and the CSS that will be generated will look like this:
.class1.class2 {}
For the record, @grobitto was the first to post this piece of information.
[ORIGINAL ANSWER]
LESS doesn't work this way.
.class1.class2 {}
- defines two classes on the same DOM node, but
.class1 {
.class2 {}
}
defines nested nodes. .class2
will only be applied if it is a child of a node with the class class1
.
I've been confused with this too and my conclusion is that LESS needs a this
keyword :).
.g {
&.posted {
}
}
you should add "&" before .posted