@ media-common - ¿Por qué necesitamos usar esto?

En la documentación de Magento 2 lib contiene lo siguiente:

@ media-common: true | false : establece si se generarán estilos comunes. Para estilos comunes cada vez que desee agregar algunos estilos, debe usar

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

Pregunta

¿Cuál es la diferencia entre usar esto y escribir Menos sin él? Como:

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

¿Cómo se compila eso de manera diferente para:

body {
    background: blue;
}

¿No se generará en styles-l.css y styles-m.css independientemente?

— Ben Crook
fuente

Magento 2 sigue el enfoque de Mobile First y @ media-common = true fue diseñado para definir estilos que son básicos (móviles) y deben estar presentes styles-m.css. Si suelta esta declaración, los estilos se enviarán tanto a archivos styles-m.csscomo a styles-l.cssarchivos.

— Olga
fuente

Ah, eso tiene más sentido, gracias. Entonces, cuando media-common = true solo saldrá a styles-m.css, y establecer media-common = false es lo mismo que no usarlo en absoluto.

— Ben Crook

Si. Realmente común en los medios: falso; se usa styles-l.lesssolo en Entonces, no creo que alguien lo configure a falsepropósito, a menos que sea para algún archivo css independiente personalizado, ¿tal vez? Por cierto, para los estilos de backend, puede usar ambos: @ media-common o descartar esa declaración, ya que todos los estilos están en el único archivo css.

— Olga

En pantallas no móviles, Magento agrega styles-l.less, por lo que todos los estilos de styles-m.lesstodavía se aplican, entonces ¿por qué el código fuera de media-common: true se agrega a ambos archivos?

— Volvox

@Volvox exactamente. Porque no usar media-common: true generará el estilo en ambos styles-l.lessy styles-m.less. Mientras se usa media-common: true , generará estilo en style-m, ¡pero en realidad se aplicará tanto a dispositivos móviles como a computadoras de escritorio! Lo comprobaré ahora para asegurarme.

— Mohammed Joraid