@ media-common - Dlaczego musimy tego używać?

12

W dokumentacji lib Magento 2 zawiera następujące elementy:

@ media-common: true | false - określa, czy generować wspólne style. W przypadku popularnych stylów za każdym razem, gdy chcesz dodać niektóre style, których powinieneś użyć

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

Pytanie

Jaka jest różnica między używaniem tego a pisaniem Less bez niego? Jak na przykład:

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

Jak to się kompiluje inaczej:

body {
    background: blue;
}

Czy to nie będzie generowane w stylach-l.css i stylach-m.css niezależnie od tego?

magento2 less-css less static-content Ben Crook
źródło

Odpowiedzi:

16

Magento 2 działa zgodnie z podejściem Mobile First, a @ media-common = true zostało zaprojektowane w celu zdefiniowania stylów, które są podstawowe (mobilne) i muszą być obecne styles-m.css. Jeśli upuścisz tę deklarację, style będą wyświetlane zarówno w plikach, jak styles-m.cssi w styles-l.cssplikach.

Olga
źródło
Ach, to ma sens, dziękuję. Więc kiedy media-common = true, wyświetli się tylko do styles-m.css, a ustawienie media-common = false oznacza to samo, co wcale go nie używa?
Ben Crook,
1
Tak. W rzeczywistości powszechne w mediach: false; jest używany styles-l.lesstylko w. Więc nie sądzę, żeby ktoś kiedykolwiek ustawił to falsecelowo, chyba że dla jakiegoś niestandardowego, samodzielnego pliku css, może? Nawiasem mówiąc, dla stylów zaplecza możesz użyć zarówno: @ media-common lub upuścić tę deklarację, ponieważ wszystkie style znajdują się w jednym pliku css.
Olga,
Na urządzeniach przenośnych Magento dodaje styles-l.less, więc wszystkie style styles-m.lesswciąż obowiązują, więc dlaczego kod poza mediami często: prawda jest dodawana do obu plików?
Volvox,
@Volvox dokładnie. Ponieważ nie używasz media-common: true wyświetli styl zarówno dla, jak styles-l.lessi styles-m.less. Podczas korzystania z media-common: true , wyświetli styl w stylu-m, ale zostanie zastosowany zarówno na urządzeniach mobilnych, jak i stacjonarnych! Sprawdzę to teraz, aby się upewnić.
Mohammed Joraid,