Support for generating nested @media rules (queries) in LESS

If two @media statements are nested inside each other, the LESS compiler in WW will combine them into one statement, presumably because browsers have historically only supported one level of @media rules. This is no longer the case, and I've noticed other LESS compilers (e.g. dotLess) now generate the CSS with the nesting preserved.

In theory, combining the queries should result in the same browser behavior, but my own anecdotal evidence suggests this isn't always true.

For example:

@media all and ( min-width: 700px ) { @media only screen and (-webkit-min-device-pixel-ratio: 1.5), only screen and (min-resolution: 144dpi) { ... } }

Results in:

@media all and (min-width: 700px) and only screen and (-webkit-min-device-pixel-ratio: 1.5), all and (min-width: 700px) and only screen and (min-resolution: 144dpi)

Is there a way I can get WW to output nested @media rules, or is this a feature I can request? Thanks

Hmm, Im just having a look at this and this does appear to work correctly as per http://lesscss.org/#-nested-media-queries as far as I can tell. Fleshing out your example slightly, e.g.

.one {
  @media all and ( min-width: 700px ) 
  { 
    width: 100px;

    @media only screen and (-webkit-min-device-pixel-ratio: 1.5), only screen and (min-resolution: 144dpi) 
    {
     color: blue;
    }
  }
}

produces:

@media all and (min-width: 700px) {
  .one {
    width: 100px;
  }
}
@media all and (min-width: 700px) and only screen and (-webkit-min-device-pixel-ratio: 1.5), all and (min-width: 700px) and only screen and (min-resolution: 144dpi) {
  .one {
    color: blue;
  }
}

which looks correct to me. If I am missing something here please point it out :)

If there is a problem is this something that may have changed in 1.5? I cant see anything specifically in the change logs around this but we do need to push out an update for Less to move it ahead to 1.5 (its currently using 1.4.2 in the most recent update).

Jeremy

Ah I see what's it doing now - thanks. I think it was a case of mixed up media queries on my part - I've shifted them around and bit and it's working. In our case, someone had compiled the same LESS file with dotLess and it had nested the media queries natively in the outputted CSS - somehow making them work in the process, where the same file compiled with WW was producing different results. Thanks for your help!