18

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?

1 Answer 1

21

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.

4
  • 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, 2016 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, 2016 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, 2018 at 15:12
  • 1
    @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. May 7, 2019 at 22:50

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

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