合并媒体查询答案

【问题标题】：Merge media query合并媒体查询
【发布时间】：2016-05-19 13:52:25
【问题描述】：

我在工作过程中写了很多媒体查询。

像这样：

@mixin fullWidth {
    @media screen and (max-width: 1024px) and (min-width: 960px) {
        @content;
    }
}

并在许多文件中使用了这个 mixin。

@include laptop {
 .test { content: "" }
}
@include laptop {
 .text2 {content: "2" }
}

它在我的 CSS 文件中生成了两个媒体查询：

@media screen and (max-width: 1024px) and (min-width: 960px) {
            .test { content: "" }
        }

 @media screen and (max-width: 1024px) and (min-width: 960px) {
            .test2 { content: "2" }
        }

我想合并相似的查询我正在使用咕噜声。

如果有必要，我会尽一切可能解决

【问题讨论】：

在纯 css 中，您应该将 1 个媒体查询的所有规则一起编写（不确定 gruntjs）

标签： css merge sass gruntjs

【解决方案1】：

如何将这两个语句合并为一个@include，如下所示：

@include laptop {
  .test { content: "" }
  .text2 {content: "2" }
}

如果您在多个文件中使用 @laptop mixin，您可以使用像 grunt-combine-mq 这样的 Grunt 插件。

【讨论】：