WENIGER CSS-Verschachtelungsklassen

101

Ich verwende WENIGER, um mein CSS zu verbessern, und versuche, eine Klasse innerhalb einer Klasse zu verschachteln. Es gibt eine ziemlich komplizierte Hierarchie, aber aus irgendeinem Grund funktioniert meine Verschachtelung nicht. Ich habe das:

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

Ich kann das nicht .g.postedzum Arbeiten bringen. es zeigt nur das .gbisschen. Wenn ich das mache, ist es in Ordnung:

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

Ich würde zu nisten gerne die .postedin .gthough. Irgendwelche Ideen?

css nested less

— newbie_86
quelle

Antworten:

192

Der &Charakter hat thistatsächlich die Funktion eines Schlüsselworts (eine Sache, die ich zum Zeitpunkt des Schreibens der Antwort nicht wusste). Es ist möglich zu schreiben:

.class1 {
    &.class2 {}
}

und das CSS, das generiert wird, sieht folgendermaßen aus:

.class1.class2 {}

Für die Aufzeichnung war @grobitto der erste, der diese Information veröffentlichte.

[URSPRÜNGLICHE ANTWORT]

WENIGER funktioniert so nicht.

.class1.class2 {} - definiert zwei Klassen auf demselben DOM-Knoten, aber

.class1 {
    .class2 {}
}

definiert verschachtelte Knoten. .class2wird nur angewendet, wenn es sich um ein untergeordnetes Element eines Knotens mit der Klasse handelt class1.

Ich war auch damit verwirrt und meine Schlussfolgerung ist, dass WENIGER ein thisSchlüsselwort braucht :).

— Mingos
quelle

sasshat diese Funktionalität mit dem Operator & integriert.

— Sevenseacat

LESS ist immer noch fantastisch, insbesondere der PHP LESS-Präprozessor mit seiner modifizierten, flexibleren Syntax. Aber bis es eine allgemein akzeptierte Syntax gibt, treten solche Probleme von Zeit zu Zeit auf. Meiner Meinung nach ist dies WENIGER der einzige Nachteil.

— Mingos

@ newbie_86 Sie können sass und native CSS-Syntax nicht mischen. Für die Migration zu Sass müssen Sie Ihre Stile komplett neu schreiben. In weniger Fällen können Sie Ihre vorhandenen Stile bereits kompilieren und Stück für Stück neu schreiben.

— Oben ohne

Ich war neugierig, warum die zweite Antwort mehr Höhen als diese hat, obwohl sie gleich ist und ein späteres Datum hat. Dann sah ich den letzten Satz und erhöhte beide Antworten

— llamerr

@topless was meinst du mit "Du kannst Sass und native CSS-Syntax nicht mischen" Ich mache das schon seit Jahren. Funktioniert super für mich.

— Shanimal

115

.g {
    &.posted {
    }
}

Sie sollten "." vor .posted hinzufügen

— grobitto
quelle

Befindet sich das kaufmännische Und beim Verschachteln direkt neben dem untergeordneten Element, wird es zu einem Doppelklassen-Selektor kompiliert. Wenn zwischen & und Selektor ein Leerzeichen ist, wird es in den untergeordneten Selektor kompiliert. Lesen Sie mehr über in weniger nisten hier .

— Nesha Zoric
quelle