1

I'm wondering if there's a tool that combines matching media query conditions into a single definition. I use LESS combined with css3mediaqueries.js, however this often hangs as the outputted stylesheet has greater than 32 media queries due to nesting - as well as resulting in code which is not particularly maintainable in CSS3 form.

I've found something, however it's only for Grunt; https://www.npmjs.org/package/grunt-combine-media-queries

user3293063
  • 13
  • 3
  • Could you give an example of matching media queries? – BoltClock Feb 25 '14 at 17:12
  • \@media screen and (max-width: 1024px) { // some CSS here } and @media screen and (max-width: 1024px) { // some CSS here }. These match in condition, however as LESS does no pre-processing on these, and therefore every in-line media query I've written has been compiled as a separate block, I'd like to combine them where the conditions match. – user3293063 Feb 25 '14 at 17:15
  • [This question and answer may be useful](http://stackoverflow.com/questions/13503862/media-query-grouping-instead-of-multiple-scattered-media-queries-that-match?rq=1). It only discusses techniques for grouping by the user. Nothing automatic to LESS. – ScottS Feb 26 '14 at 19:41

1 Answers1

1

The LESS team opted against combining multiple matching media queries. You can read about it in this issue on Github: https://github.com/less/less.ruby/issues/196

I think you need to look for a CSS tool, to combine the rules, as the LESS compiler wont be supporting it in the near future (if ever).

The Grunt tool you found, also parses the compiled CSS to combine the media queries: https://github.com/buildingblocks/grunt-combine-media-queries/blob/master/tasks/combine_media_queries.js

Consider using Grunt to build your LESS.

Martin
  • 2,302
  • 2
  • 30
  • 42