MNIEJ klas zagnieżdżania CSS

Używam MNIEJ, aby ulepszyć mój CSS i próbuję zagnieździć klasę w klasie. Hierarchia jest dość skomplikowana, ale z jakiegoś powodu moje zagnieżdżanie nie działa. Mam to:

.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;
         }
    }
}

Nie mogę dostać się .g.posteddo pracy. to tylko pokazuje .g. Jeśli to zrobię, to dobrze:

.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;
         }
    }

Chciałbym jednak zagnieździć się .postedw .gśrodku. Jakieś pomysły?

&Postać posiada funkcję thishasła, rzeczywiście (a co mi nie wiedział w momencie pisania odpowiedzi). Można napisać:

.class1 {
    &.class2 {}
}

a wygenerowany CSS będzie wyglądał następująco:

.class1.class2 {}

Dla przypomnienia, @grobitto jako pierwszy opublikował tę informację.

[ORYGINALNA ODPOWIEDŹ]

LESS nie działa w ten sposób.

.class1.class2 {} - definiuje dwie klasy w tym samym węźle DOM, ale

.class1 {
    .class2 {}
}

definiuje węzły zagnieżdżone. .class2zostanie zastosowany tylko wtedy, gdy jest dzieckiem węzła z klasą class1.

Ja też byłem z tym zdezorientowany i doszedłem do wniosku, że MNIEJ potrzebuje thissłowa kluczowego :).

.g {
    &.posted {
    }
}

przed wysłaniem należy dodać „&”

Jeśli ampersand znajduje się tuż obok elementu podrzędnego podczas zagnieżdżania, jest kompilowany do podwójnego selektora klas. Jeśli między & a selektorem jest spacja, zostanie on wkompilowany w selektor potomny. Przeczytaj więcej o zagnieżdżaniu w Less tutaj .