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

Solution

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

Comments

[Tregonia]

Thank you for the clear and concise answer. I think this was a case of staring at it so long that it hid in front of me. Along with the notion that I use screen in my standard responsive mixin and the IE mixin was found on the web. My true error was not removing the original setting when making the mixin. Thanks again