媒体查询合并时如何添加特定媒体查询规则答案

【问题标题】：How to add specific media query rule when media query combined媒体查询合并时如何添加特定媒体查询规则
【发布时间】：2018-02-15 17:11:47
【问题描述】：

我的scss 文件中有两个媒体查询组合如下：

    @media all and (min-width: 600px) and (orientation: portrait),
    // add css rule to the above media query
    all and (min-width: 601px) and (max-width: 840px) and (orientation : portrait) {
       border: 1px solid #red
       // add specific css rule to current media query only
    }

在这种情况下，我如何为每个查询添加特定规则？

【问题讨论】：

标签： css sass media-queries

【解决方案1】：

恐怕你做不到。这是一个查询，有两组规则，没有“当前”查询。您可以像这样在新查询中重复规则：

@media all and (min-width: 600px) and (orientation: portrait) {
    // styles
}

@media all and (min-width: 600px) and (orientation: portrait),
all and (min-width: 601px) and (max-width: 840px) and (orientation : portrait) {
   // shared styles
}

ps：您的示例中缺少类声明

【讨论】：

【解决方案2】：

您可以使用变量来保存查询。还要嵌套@media 以保持它们的组织性，因为所有@media 规则都不会嵌套在CSS 中。在@media 规则中进行插值会很好，但它还没有工作。

$media: 'all and (min-width: 600px) and (orientation: portrait)';
$media2: 'all and (min-width: 601px) and (max-width: 840px) and (orientation : portrait)';

@media #{$media} {
   color:red;

  @media #{$media}, #{$media2} {
      color:blue;
  }
}

【讨论】：