МЕНЬШЕ классов вложенности CSS

101

Я использую 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хотя. Любые идеи?

css nested less newbie_86
источник

Ответы:

192

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

.class1 {
    &.class2 {}
}

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

.class1.class2 {}

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

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

LESS так не работает.

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

.class1 {
    .class2 {}
}

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

Меня это тоже смутило, и я пришел к выводу, что LESS нужно thisключевое слово :).

минго
источник
5
sassэта функция встроена в оператор &.
sevenseacat
2
LESS по-прежнему прекрасен, особенно препроцессор PHP LESS с его модифицированным, более гибким синтаксисом. Но пока не будет общепринятого синтаксиса, время от времени будут возникать такие проблемы. На мой взгляд, это единственный недостаток LESS.
mingos
1
@ newbie_86 Нельзя смешивать синтаксис sass и собственный синтаксис css. Таким образом, переход на Sass требует полного переписывания ваших стилей, а за меньшее время вы уже можете скомпилировать существующие стили и начать переписывать их по частям.
топлесс
1
Мне было любопытно, почему у второго ответа больше взлетов, чем у этого, несмотря на то, что он такой же и имеет более позднюю дату. Затем я увидел последнее предложение и увеличил оба ответа
llamerr 07
@topless, что вы имеете в виду, говоря «Нельзя смешивать синтаксис sass и собственный синтаксис css» Я делаю это годами. У меня отлично работает.
Shanimal
115 
.g {
    &.posted {
    }
}

вы должны добавить "&" перед .posted

Grobitto
источник
2

Если амперсанд расположен рядом с дочерним элементом во вложении, он компилируется в двойной селектор класса. Если между & и селектором есть пробел, он будет скомпилирован в дочерний селектор. Подробнее о вложении в Less читайте здесь .

Неша Зорич
источник