LESS CSS Nesting Classes

Question

I use LESS to improve my CSS and try to nest a class in a class. There is a rather complicated hierarchy, but for some reason my nesting does not work. I have it:

.g { float: left; color: #323a13; .border(1px,#afc945); .gradient(#afc945, #c8da64); .common; span { .my-span; .border-dashed(1px,rgba(255,255,255,0.3)); } .posted { .my-posted; span { border: none; } } } 

I can't get .g.posted to work. it just shows the .g bit. If I do this, it will be fine:

 .g { float: left; color: #323a13; .border(1px,#afc945); .gradient(#afc945, #c8da64); .common; span { .my-span; .border-dashed(1px,rgba(255,255,255,0.3)); } } .g.posted { .my-posted; span { border: none; } } 

I would like to insert .posted into .g . Any ideas?

Answer 1

[SEPARATE RESPONSE]

Since I was expelled without any comment or excuse, I feel obligated to respond to what, in my opinion, could be the reason for the downvote.

The & symbol has the keyword function this , in fact (a thing that I did not know at the time of writing the answer). You can write:

 .class1 { &.class2 {} } 

and the generated CSS will look like this:

 .class.class2 {} 

For the record, @grobitto was the first to publish this information.

[ORIGINAL RESPONSE]

LESS does not work this way.

.class1.class2 {} - defines two classes in one DOM node, but

 .class1 { .class2 {} } 

defines nested nodes. .class2 only applies if it is a child of node with class class1 .

I was also confused with this, and my conclusion is that LESS requires the keyword this :).

Answer 2

 .g { &.posted { } } 

you should add "&" before .posted