@ media-common - Mengapa kita perlu menggunakan ini?

Dalam dokumentasi Magento 2 lib berisi:

@ media-common: true | false - mengatur apakah akan menampilkan gaya umum. Untuk gaya umum setiap kali Anda ingin menambahkan beberapa gaya yang harus Anda gunakan

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

Pertanyaan

Apa perbedaan antara menggunakan ini dan hanya menulis Less tanpa itu? Seperti:

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

Bagaimana cara kompilasi secara berbeda untuk:

body {
    background: blue;
}

Tidakkah itu akan ditampilkan dalam styles-l.css dan styles-m.css?

— Ben Crook
sumber

Magento 2 mengikuti pendekatan Mobile First dan @ media-common = true dirancang untuk mendefinisikan gaya yang basis (seluler) dan harus ada di styles-m.css. Jika Anda menjatuhkan gaya deklarasi ini akan dihasilkan ke styles-m.cssdan styles-l.cssfile.

— Olga
sumber

Ah itu lebih masuk akal, terima kasih. Jadi ketika media-common = true hanya akan menampilkan ke styles-m.css, dan pengaturan media-common = false sama dengan tidak menggunakannya sama sekali?

— Ben Crook

Iya. Sebenarnya media-common: false; hanya digunakan dalam styles-l.less. Jadi saya tidak berpikir seseorang akan sengaja mengaturnya false, kecuali untuk file css kustom yang berdiri sendiri, mungkin? Ngomong-ngomong untuk gaya Backend Anda bisa menggunakan keduanya: @ media-common atau jatuhkan pernyataan itu, karena semua gaya ada di file css tunggal.

— Olga

Pada non-mobile display magento menambahkan styles-l.less, jadi semua gaya dari styles-m.lessmasih berlaku, jadi mengapa kode di luar media-umum: true ditambahkan ke kedua file?

— Volvox

@ Volvox tepatnya. Karena tidak menggunakan media-common: true akan menampilkan gaya untuk keduanya styles-l.lessdan styles-m.less. Sementara dengan menggunakan media-common: true akan menampilkan gaya dalam style-m tetapi sebenarnya akan diterapkan pada ponsel dan desktop! Aku akan memeriksanya sekarang untuk memastikan.

— Mohammed Joraid