How to get a SASS nested nested media query to work with the use of the media query or operator

Question

I am trying to get a nested IE10+ media query to work in SASS and am not understanding the output. I think that things are getting weird with the use of the media query or operator ,. As a result, this query will not apply in all cases because the only thing that is outputted is one side of the or.

Note that these are originally mixins; i removed the mixins to make things easier to debug

.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 to this:

@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;
  }
}

The expected outcome is :

@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 appears to be a hyper-specific case that appears is part misbehavior in Sass and part ambiguous expectations.

Sass handles nesting combined with comma delimited media queries without problems... until you start specifying a display type on both the inner and outer query:

/* 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 where both the inner and outer query contains a display type (all, screen), the compiled results do not correctly match what was written. This appears to be a case of Sass trying to write something that resembles a valid media query (since it knows that screen and all is not valid).

So only specify the display type 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 to:

@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;
  }
}