МЕНЬШИЕ классы вложенности 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. Любые идеи?

Ответы

Ответ 1

[ОТДЕЛЬНЫЙ ОТВЕТ]

Поскольку я был исключен без каких-либо комментариев или оправданий, я чувствую себя обязанным реагировать на то, что, по моему мнению, может быть причиной downvote.

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

.class1 {
    &.class2 {}
}

и сгенерированный CSS будет выглядеть так:

.class.class2 {}

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

[ОРИГИНАЛЬНЫЙ ОТВЕТ]

LESS не работает таким образом.

.class1.class2 {} - определяет два класса в одном DOM node, но

.class1 {
    .class2 {}
}

определяет вложенные узлы. .class2 применяется только в том случае, если он является дочерним элементом node с классом class1.

Я тоже был в замешательстве с этим, и мой вывод заключается в том, что LESS требуется ключевое слово this:).

Ответ 2

.g {
    &.posted {
    }
}

вам следует добавить "&" до .posted