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

Posted 2023-03-06

【中文标题】如何使用媒体查询或运算符使 SASS 嵌套嵌套媒体查询工作

【英文标题】：How to get a SASS nested nested media query to work with the use of the media query or operator

【发布时间】：2015-07-18 03:41:00

【问题描述】：

我正在尝试让嵌套的 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;
  

【问题讨论】：

您希望由此生成什么查询？您是否尝试过验证您预期的 CSS？

我在原帖中添加了预期的结果

【参考方案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;
  

在内部和外部查询都包含显示类型（all、screen）的这两种情况下，编译结果与写入的内容不正确匹配。这似乎是 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;
  

【讨论】：

感谢您简洁明了的回答。我认为这是一个盯着它看太久以至于它躲在我面前的例子。除了我在标准响应式 mixin 中使用 screen 和 IE mixin 的想法之外，还可以在网络上找到 IE mixin。我真正的错误是在制作 mixin 时没有删除原始设置。再次感谢