@ media-common - Perché dobbiamo usarlo?

Nella documentazione di Magento 2 lib contiene quanto segue:

@ media-common: true | false - imposta se produrre stili comuni. Per gli stili comuni ogni volta che vuoi aggiungere alcuni stili che dovresti usare

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

Domanda

Qual è la differenza tra usare questo e scrivere meno senza di esso? Ad esempio:

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

In che modo si compila diversamente per:

body {
    background: blue;
}

Non verrà emesso indipendentemente da styles-l.css e styles-m.css?

— Ben Crook
fonte

Magento 2 segue il primo approccio mobile e @ media-common = true è stato progettato per definire gli stili che sono base (mobile) e devono essere presenti in styles-m.css. Se si lascia cadere questo stili dichiarazione sarà emessi sia per styles-m.csse styles-l.cssfile.

— Olga
fonte

Ah, questo ha più senso, grazie. Quindi, quando media-common = true verrà generato solo su styles-m.css e l'impostazione media-common = false equivale a non usarlo affatto?

— Ben Crook,

Sì. In realtà media-comuni: falso; è usato styles-l.lesssolo. Quindi non penso che qualcuno lo imposterà mai di falseproposito, a meno che per qualche file css autonomo personalizzato, forse? A proposito per gli stili di Backend puoi usare entrambi: @ media-common o rilasciare quella dichiarazione, poiché tutti gli stili sono sul singolo file css.

— Olga,

Sul display non mobile si aggiunge Magento styles-l.less, quindi tutti gli stili sono styles-m.lessancora validi, quindi perché il codice al di fuori dei media comuni: true viene aggiunto a entrambi i file?

— Volvox,

@Volvox esattamente. Perché non usando media-common: true genererà lo stile su entrambi styles-l.lesse styles-m.less. Mentre con l'utilizzo di media-common: true produrrà lo stile in stile-m ma sarà effettivamente applicato a dispositivi mobili e desktop! Lo controllerò ora per essere sicuro.

— Mohammed Joraid