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

12

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

Respuestas:

16

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
1
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