Nested Media Queries error?

[arnoschaefer]

Hi,

I am trying to write scss with the following nested media queries:

@media not all and (max-width: 450px) {
    @media not all and (max-width: 690px) and (orientation: portrait) {
        @media (max-width: 1000px) {
            //... something
        }
    }
}

If I understand media queries correctly, nested media queries should result in an AND operation, so this should be equivalent to (in a slightly easier to read way):

not (max-width: 450px) and not (max-width: 690px and orientation: portrait) and (max-width: 1000px)

(or to make clear what I am trying to accomplish: width > 690 and <= 1000px in portrait width > 450 and <= 1000px in landscape)

However, the leafo scss compiler turns this into:

@media not all and (max-width:450px) and (max-width:690px) and (orientation:portrait) and (max-width:1000px) which would be equivalent to

not (max-width: 450px and max-width: 690px and orientation portrait and max-width: 1000px)

which unfortunately is something else entirely.

Do I have a mistake in my logic, or is this a bug in the compiler? Is it possible to turn off the untangling of nested media queries?

Regards,

Arno

[cyberalien]

Ruby SASS doesn't merge those queries at all.

a {
  @media not all and (max-width: 450px) {
    @media not all and (max-width: 690px) and (orientation: portrait) {
        @media (max-width: 1000px) {
            color: red;
          }
      }
  }
}

results in

@media not all and (max-width: 450px) {
  @media not all and (max-width: 690px) and (orientation: portrait) {
    @media (max-width: 1000px) {
      a {
        color: red;
      }
    }
  }
}

[Cerdic]

687 allows to get the same result: any non trivial @media query with a not is kept untouched