Менше класів вкладання CSS

Я використовую LESS для вдосконалення свого CSS і намагаюся вкласти клас в клас. Існує досить складна ієрархія, але чомусь моє вкладення не працює. У мене це:

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

Я не можу змусити .g.postedпрацювати. це просто показує .gшматочок. Якщо я це роблю, це добре:

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

Я хотів би гніздо .postedв .gхоча. Якісь ідеї?

&Характер має функцію thisключового слова, на самому ділі (а що я не знаю , на момент написання відповіді). Можна написати:

.class1 {
    &.class2 {}
}

і CSS, який буде створений, буде виглядати приблизно так:

.class1.class2 {}

Для запису @grobitto першим опублікував цю інформацію.

[ОРИГІНАЛЬНИЙ ВІДПОВІДЬ]

Менше не працює таким чином.

.class1.class2 {} - визначає два класи на одному вузлі DOM, але

.class1 {
    .class2 {}
}

визначає вкладені вузли. .class2буде застосовано, лише якщо це дочірній вузол класу class1.

Я теж плутався з цим, і я дійшов висновку, що МЕНШЕ потрібно thisключове слово :).

.g {
    &.posted {
    }
}

слід додати "&" перед .posted

Якщо амперсанд розташований поруч із дочірнім елементом у вкладенні, він збирається у селектор подвійного класу. Якщо між & та селектором є пробіл, він буде складений у дочірній селектор. Детальніше про гніздування в Менші тут .