LESS CSS nesting classes

Question

I\'m using LESS to improve my CSS and am trying to nest a class within a class. There\'s a fairly complicated hierarchy but for some reason my nesting doesn\'t work. I have

Answer 1

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 :).

Answer 2

.g {
    &.posted {
    }
}

you should add "&" before .posted

Answer 3

If the ampersand is located right next to the child element in nesting, it is compiled into a double class selector. If there is space between & and selector it will be compiled into child selector. Read more about nesting in Less here.