如何获取SASS嵌套的嵌套媒体查询以与媒体查询或运算符配合使用

Question

我正在尝试获取嵌套的IE10 +媒体查询以在SASS中工作，并且无法理解输出。我认为使用媒体查询or运算符使事情变得很奇怪,。结果，此查询将不适用于所有情况，因为唯一输出的是的一侧or。

请注意，这些最初是mixin。我删除了mixins以使调试更容易

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

编译为此：

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

预期的结果是：

@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

这似乎是一个特例性案例，在Sass中表现为部分行为不当，在期望中也存在模棱两可的情况。

Sass可以毫无问题地处理嵌套和逗号分隔的媒体查询，直到您开始在内部和外部查询上指定显示类型：

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

输出：

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

在内部查询和外部查询都包含显示类型（全部，屏幕）的两种情况下，编译结果与编写的结果均不正确。这似乎是Sass尝试编写类似于有效媒体查询的内容（因为它知道screen and all无效）的情况。

因此，只需指定一次显示类型。

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

编译为：

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