Question

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

像这样：

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

并将这个混合使用了许多文件。

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

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

如果有必要，我将尽可能使用所有内容

Answer 1

如何将2个语句组合成一个@include，如下所示：

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

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

合并媒体查询

1 个答案: