@ media-common - Por que precisamos usar isso?

12

Na documentação da biblioteca Magento 2, ela contém o seguinte:

@ media-common: true | false - define se os estilos comuns serão exibidos. Para estilos comuns sempre que você deseja adicionar alguns estilos, você deve usar

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

Questão

Qual é a diferença entre usar isso e escrever menos sem ele? Tal como:

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

Como isso é compilado de maneira diferente para:

body {
    background: blue;
}

Ele não será produzido em styles-l.css e styles-m.css, independentemente?

magento2 less-css less static-content Ben Crook
fonte

Respostas:

16

O Magento 2 segue a abordagem Mobile First e @ media-common = true foi desenvolvido para definir estilos básicos (móveis) e que devem estar presentes no styles-m.css. Se você soltar essa declaração, os estilos serão gerados nos arquivos styles-m.csse styles-l.css.

Olga
fonte
Ah, isso faz mais sentido, obrigado. Portanto, quando media-common = true, a saída será apenas para styles-m.css, e definir media-common = false é o mesmo que não usá-lo?
Ben Crook
11
Sim. Na verdade, mídia comum: false; é usado styles-l.lessapenas. Então, acho que alguém nunca definirá isso de falsepropósito, a menos que para algum arquivo css independente personalizado, talvez? A propósito, para os estilos de back-end, você pode usar os dois: @ media-common ou largar essa declaração, pois todos os estilos estão no único arquivo css.
Olga
Em monitores não móveis, o magento adiciona styles-l.less, então todos os estilos styles-m.lessainda se aplicam, então por que o código fora do media-common: true é adicionado aos dois arquivos?
Volvox
@Volvox exatamente. Porque não usar media-common: true produzirá o estilo para ambos styles-l.lesse styles-m.less. Enquanto estiver usando o media-common: true, ele exibirá o estilo no style-m, mas será realmente aplicado ao celular e ao desktop! Vou verificar agora para ter certeza.
Mohammed Joraid