css - 结合匹配的媒体查询？

Question

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

我找到了一些东西，但它只适用于 Grunt； https://www.npmjs.org/package/grunt-combine-media-queries

Answer 1

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

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

您找到的 Grunt 工具也解析编译后的 CSS 以组合媒体查询: https://github.com/buildingblocks/grunt-combine-media-queries/blob/master/tasks/combine_media_queries.js

考虑使用 Grunt 构建您的 LESS。