How to get a Sested-nested nested media query to work using a media query or operator

Question

I am trying to get nested requests in IE10 + format to work in SASS and don’t understand the output. I think everything is strange using a media query or operator,. As a result, this query will not be applied in all cases, because the only thing that is output is one side of or .

Note that these are originally mixins; I removed mixins to make debugging easier

 .element { @media only screen and (min-width: 825px) and (max-width: 999px) { font-size: 10.4vw; @media all and (-ms-high-contrast: none), (-ms-high-contrast: active) { font-size: 9.6vw; } } } 

Compiles:

 @media only screen and (min-width: 825px) and (max-width: 999px) { .element { font-size: 10.4vw; } } @media only screen and (min-width: 825px) and (max-width: 999px) and (-ms-high-contrast: active) { .element { font-size: 9.6vw; } } 

Expected Result:

 @media all and (-ms-high-contrast: none) and (min-width: 825px) and (max-width: 999px), (-ms-high-contrast: active) and (min-width: 825px) and (max-width: 999px) { .element { font-size: 9.6vw; } } 

Answer 1

This seems to be the hyper-specific case that appears to be misbehaving in Sass and partially vague expectations.

Sass handles nesting in conjunction with comma-delimited messages without any problems ... until you start specifying the display type in both the internal and the external request:

 /* without `screen` */ .foo { @media (min-width: 20em) { color: yellow; @media all and (max-width: 40em), (orientation: portrait) { color: green; } } } /* without `only` */ .bar { @media screen and (min-width: 20em) { color: yellow; @media all and (max-width: 40em), (orientation: portrait) { color: green; } } } /* with `only screen` */ .buzz { @media only screen and (min-width: 20em) { color: red; @media all and (max-width: 40em) { color: blue; } } } 

Output:

 /* without `screen` */ @media (min-width: 20em) { .foo { color: yellow; } } @media all and (min-width: 20em) and (max-width: 40em), (min-width: 20em) and (orientation: portrait) { .foo { color: green; } } /* without `only` */ @media screen and (min-width: 20em) { .bar { color: yellow; } } @media screen and (min-width: 20em) and (orientation: portrait) { .bar { color: green; } } /* with `only screen` */ @media only screen and (min-width: 20em) { .buzz { color: red; } } 

In both cases, when the internal and external query contains the type of display (everything, the screen), the compiled results incorrectly correspond to what was written. This is similar to the case when Sass tries to write something similar to a valid media query (since he knows that screen and all invalid).

Thus, the display type is indicated only once.

 .element { @media (min-width: 825px) and (max-width: 999px) { font-size: 10.4vw; @media all and (-ms-high-contrast: none), (-ms-high-contrast: active) { font-size: 9.6vw; } } } 

Compiles:

 @media (min-width: 825px) and (max-width: 999px) { .element { font-size: 10.4vw; } } @media all and (min-width: 825px) and (max-width: 999px) and (-ms-high-contrast: none), (min-width: 825px) and (max-width: 999px) and (-ms-high-contrast: active) { .element { font-size: 9.6vw; } }