newbie_86 newbie_86 - 4 years ago 163
Less Question

LESS CSS nesting classes

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 this:

.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 the
.g.posted
to work. it just shows the
.g
bit.
If i do this it's 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'd like to nest the
.posted
in
.g
though. Any ideas?

Answer Source

[EDITED ANSWER]

As I have been downvoted without any comment or justification, I feel obliged to react to what I feel like might be the cause of the downvote.

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 generated CSS will look like this:

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

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download