结合匹配的媒体查询？答案

【问题标题】：Combine matching media queries?结合匹配的媒体查询？
【发布时间】：2014-03-28 02:13:54
【问题描述】：

我想知道是否有一种工具可以将匹配的媒体查询条件组合到一个定义中。我将 LESS 与 css3mediaqueries.js 结合使用，但是这通常会挂起，因为输出的样式表由于嵌套而具有超过 32 个媒体查询 - 并且导致代码在 CSS3 形式中不是特别可维护。

【问题讨论】：

你能举一个匹配媒体查询的例子吗？
\@media screen and (max-width: 1024px) { // 这里有一些 CSS } and @media screen and (max-width: 1024px) { // 这里有一些 CSS }。这些条件匹配，但是由于 LESS 没有对这些进行预处理，因此我编写的每个内联媒体查询都被编译为一个单独的块，我想在条件匹配的地方组合它们。跨度>
This question and answer may be useful。它只讨论按用户分组的技术。 LESS 没有什么是自动的。

【解决方案1】：

LESS 团队选择不合并多个匹配的媒体查询。你可以在 Github 上的这个 issue 中阅读它：https://github.com/less/less.ruby/issues/196

我认为您需要寻找一个 CSS 工具来组合规则，因为 LESS 编译器在不久的将来（如果有的话）不会支持它。

考虑使用 Grunt 构建您的 LESS。

【讨论】：