@ media-common - Pourquoi devons-nous l'utiliser?

12

Dans la documentation de la librairie Magento 2, il contient les éléments suivants:

@ media-common: true | false - définit s'il faut afficher les styles communs. Pour les styles courants chaque fois que vous souhaitez ajouter des styles, vous devez les utiliser

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

Question

Quelle est la différence entre utiliser ceci et simplement écrire moins sans cela? Tel que:

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

Comment cela se compile-t-il différemment pour:

body {
    background: blue;
}

Ne sera-t-il pas affiché dans styles-l.css et styles-m.css?

magento2 less-css less static-content Ben Crook
la source

Réponses:

16

Magento 2 suit l' approche Mobile First et @ media-common = true a été conçu pour définir des styles qui sont de base (mobile) et doivent être présents dans styles-m.css. Si vous supprimez cette déclaration, les styles seront affichés à la fois dans styles-m.csset dans les styles-l.cssfichiers.

Olga
la source
Ah ça a plus de sens, merci. Ainsi, lorsque media-common = true, il ne sortira que vers styles-m.css, et définir media-common = false revient à ne pas l'utiliser du tout?
Ben Crook
1
Oui. En fait , commun aux médias: faux; est utilisé styles-l.lessuniquement. Donc, je ne pense pas que quelqu'un le définira jamais à falsedessein, sauf pour un fichier css autonome personnalisé, peut-être? Soit dit en passant pour les styles d'arrière-plan, vous pouvez utiliser les deux: @ media-common ou supprimer cette déclaration, car tous les styles sont sur le seul fichier css.
Olga
Sur l'affichage non mobile, magento ajoute styles-l.less, donc tous les styles de styles-m.lesss'appliquent toujours, alors pourquoi le code en dehors de media-common: true est ajouté aux deux fichiers?
Volvox
@Volvox exactement. Parce que ne pas utiliser media-common: true affichera le style à la fois sur styles-l.lesset styles-m.less. Avec l'utilisation de media-common: true, il affichera le style dans style-m mais il sera en fait appliqué à la fois au mobile et au bureau! Je vais le vérifier maintenant pour être sûr.
Mohammed Joraid