12

In the Magento 2 lib documentation it contains the following:

@media-common: true|false - sets whether to output common styles. For common styles every time you want to add some styles you should use

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

Question

What is the difference between using this and just writing Less without it? Such as:

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

How does that compile differently to:

body {
    background: blue;
}

Won't it be outputted in styles-l.css and styles-m.css regardless?

16

Magento 2 follows Mobile First approach and @media-common = true was designed to define styles that are base (mobile) and must be present in styles-m.css. If you drop this declaration styles will be outputted both to styles-m.css and styles-l.css files.

  • Ah that makes more sense, thank you. So when media-common = true it will only output to styles-m.css, and setting media-common = false is the same as not using it at all? – Ben Crook Apr 26 '16 at 14:43
  • 1
    Yes. Actually media-common: false; is used in styles-l.less only. So I don't think someone will ever set it to false on purpose, unless for some custom stand-alone css file, maybe? By the way for Backend styles you can use both: @media-common or drop that declaration, as all styles are on the single css file. – Olga Apr 26 '16 at 15:21
  • On non-mobile display magento adds styles-l.less, so all styles from styles-m.less still apply, so why code outside media-common:true is added to both files? – Volvox Nov 21 '18 at 15:12
  • @Volvox exactly. Because not using media-common:true will output the style to both styles-l.less and styles-m.less. While with using media-common:true it will output style in style-m but it will be actually applied to both mobile and desktop! I'm gonna check it now to make sure. – Mohammed Joraid May 7 '19 at 22:50

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.