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 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?

score 213 · Accepted Answer · edited Mar 13 '19 at 14:14

213

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

edited Mar 13 '19 at 14:14

E_net4

27,810
13
101
139

answered Feb 25 '11 at 12:22

mingos

23,778
12
70
107

5

`sass` has that functionality built in with the & operator. – sevenseacat Feb 25 '11 at 12:27
2

LESS is still awesome, especially the PHP LESS preprocessor, with its modified, more flexible syntax. But until there's some sort of commonly accepted syntax, such problems will arise from time to time. In my view, this one is LESS' only drawback. – mingos Feb 25 '11 at 13:35
1

@newbie_86 You cannot mix sass and native css syntax. So migrating to Sass requires a complete re-write of your styles, while in less you can already compile your existing styles and start re-writing them piece by piece. – topless May 08 '13 at 12:34
1

I was curious why second answer have more ups than this one, despite it's same and have latter date. Then i saw last sentence and upped both answers – llamerr Jan 07 '14 at 16:40
@topless what do you mean by "You cannot mix sass and native css syntax" I've been doing it for years. Works great for me. – Shanimal Feb 04 '16 at 05:23
@topless: Completely untrue. For example, you can take a .css file, change the extension to .scss, make no other changes and run it through SASS. It will work perfectly. – Bill Dagg Oct 17 '16 at 23:49
I'd rejig this answer to have the edit on top, I almost missed it and left thinking "this is impossible" – Richard Tingle Feb 03 '17 at 15:56
I think it's probably time to rewrite this answer to combine the original answer and the edit, and so it doesn't start with the comment (especially as it is this part that is now shown on google). – Caltor Feb 16 '17 at 11:44

score 121 · Answer 2 · edited Nov 30 '11 at 12:40

121

.g {
    &.posted {
    }
}

you should add "&" before .posted

edited Nov 30 '11 at 12:40

mingos

23,778
12
70
107

answered Mar 27 '11 at 18:27

grobitto

1,211
1
7
3

score 2 · Answer 3 · answered Feb 21 '18 at 08:20

2

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.

answered Feb 21 '18 at 08:20

Nesha Zoric

6,218
42
34

LESS CSS nesting classes

3 Answers3

Linked

Related