Css 如何使用媒体查询或运算符使SASS嵌套媒体查询工作

我试图让一个嵌套的IE10+媒体查询在SASS中工作，但不理解输出。我认为使用媒体查询

或
操作员
，
会让事情变得很奇怪。因此，此查询不会适用于所有情况，因为输出的唯一内容是
或
的一侧

请注意，这些最初是混合物；我删除了mixin以使调试更容易

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

这似乎是一个非常特殊的案例，部分是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;
  }
}

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

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

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

您希望通过此查询生成什么查询？你试过验证你预期的CSS吗？我在原始帖子中添加了预期的结果谢谢你的清晰简洁的回答。我想这是一个长时间盯着它看以至于它藏在我面前的例子。随着我在标准响应mixin和IE mixin中使用screen的想法在web上被发现。我真正的错误是在进行混音时没有删除原始设置。再次感谢