@ media-common - Warum müssen wir das verwenden?

12

In der Magento 2 lib-Dokumentation ist Folgendes enthalten:

@ media-common: true | false - Legt fest, ob allgemeine Stile ausgegeben werden sollen. Für gängige Stile jedes Mal, wenn Sie einige Stile hinzufügen möchten, die Sie verwenden sollten

& when (@media-common = true) {
    your styles
}

Frage

Was ist der Unterschied zwischen dem Verwenden und dem Schreiben von Less ohne es? Sowie:

& when (@media-common = true) {
    body {
        background: blue;
    }
}

Wie kompiliert sich das anders als:

body {
    background: blue;
}

Wird es nicht unabhängig davon in styles-l.css und styles-m.css ausgegeben?

magento2 less-css less static-content Ben Crook
quelle

Antworten:

16

Magento 2 folgt dem Mobile First-Ansatz und @ media-common = true wurde entwickelt, um Stile zu definieren, die base (mobil) sind und in denen vorhanden sein muss styles-m.css. Wenn Sie diese Deklaration löschen, werden Stile sowohl in styles-m.cssals auch in styles-l.cssDateien ausgegeben .

Olga
quelle
Ah, das macht mehr Sinn, danke. Wenn media-common = true ist, wird es nur in styles-m.css ausgegeben, und das Festlegen von media-common = false ist dasselbe, als würde es überhaupt nicht verwendet?
Ben Crook
1
Ja. Eigentlich medienüblich: falsch; wird styles-l.lessnur in verwendet. Ich glaube also nicht, dass jemand es jemals falseabsichtlich einstellen wird , außer für eine benutzerdefinierte eigenständige CSS-Datei, vielleicht? Übrigens können Sie für Backend-Stile beide verwenden: @ media-common oder diese Deklaration löschen, da sich alle Stile in der einzelnen CSS-Datei befinden.
Olga
Auf nicht-mobilen Displays fügt Magento hinzu styles-l.less, sodass alle Stile styles-m.lessweiterhin gelten. Warum also Code außerhalb von media-common: true wird beiden Dateien hinzugefügt?
Volvox
@ Volvox genau. Da media-common: true nicht verwendet wird, wird der Stil sowohl an styles-l.lessals auch an ausgegeben styles-m.less. Bei der Verwendung von media-common: true wird der Stil in style-m ausgegeben, aber tatsächlich auf Mobilgeräte und Desktops angewendet! Ich werde es jetzt überprüfen, um sicherzugehen.
Mohammed Joraid