Less language Media Merging

Media merging happens when the compiler encounters media nested directly into another media. Whatever is written inside nested media is applied only if both inner and outer media queries are satisfied. It is very similar to rulesets nesting: outer media is compiled as usually, nested media make no difference to it. Inner media queries are combined with outer media queries.

Sample input:

@media print { 
  .class {
    margin: 3 3 3 3;
    color: black;
    @media (max-width: 117px) { // margin should be smaller in small media
      margin: 1 1 1 1;
    }
  }
}

compiles into:

@media print {
  .class {
    margin: 3 3 3 3;
    color: black;
  }
}
@media print and (max-width: 117px) { // print on small media should use smaller margin
  .class {
    margin: 1 1 1 1;
  }
}

Any media can describe multiple mediums. If this is the case, then each medium query described by inner media type is combined with each medium query described by outer media:

@media print, screen { 
  .class {
    // ... whatever ...
    @media (max-width: 117px), (max-device-aspect-ratio: 1367/768) {
      margin: 1 1 1 1;
    }
  }
}

compiles into:

@media print, handheld {
  .class {
    // ... whatever ...  
  }
}
@media print and (max-width: 117px), handheld and (max-width: 117px), 
print and (max-device-aspect-ratio: 1367/768), handheld and (max-device-aspect-ratio: 1367/768) {
 .class {
    margin: 1 1 1 1;
  }
}

Minor Less.js - Less4j Difference

CSS specification allows only one media type inside each media query. That media type can be followed by any number of media expressions joined by "and". If inner media type starts with a media type, resulting less style sheet is invalid. Such input is treated differently by less4j and less.js.

Less.js combines inner and outer media queries as they are and thus produce invalid CSS. Less4j ignores media type in inner media query and produces a warning.

Sample input:

@media print { 
  .class {
    @media screen and (max-width: 117px){
      margin: 1 1 1 1;
    }
  }
}

Less.js generated style sheet:

@media print and screen and (max-width: 117px) {
  .class {
    margin: 1 1 1 1;
  }
}

Less4j generated style sheet:

@media print and (max-width: 117px) {
  .class {
    margin: 1 1 1 1;
  }
}