0

Using SASS and Respond-To (Breakpoint) produces a .css file with multiple media queries, not merged.

Not a big deal, but in IE8, using css3-mediaqueries.js, cause IE8 crash. css3-mediaqueries.js add a style tag for every mediaqueries, and IE8 can't get up to 32...

How can I merge all the media queries automatically?

Thanks

Andrey Mikhaylov - lolmaus
  • 23,107
  • 6
  • 84
  • 133
sayam
  • 163
  • 2
  • 14

2 Answers2

0

Sass does not have this functionality. Either plan your media queries better so that you only have a few as possible or find a 3rd party application that will merge them for you.

cimmanon
  • 67,211
  • 17
  • 165
  • 171
-1

Generally, multiple media queries is not a big deal thanks to GZIP being used to compress CSS when passed from server to client.

To enable media queries support in IE7 and 8, i've been succesfully using Respond.js.

See this small guide how to combine Respond.js with Selectivizr: https://stackoverflow.com/a/16732064/901944

Community
  • 1
  • 1
Andrey Mikhaylov - lolmaus
  • 23,107
  • 6
  • 84
  • 133
  • 2
    "I can just use gzip" is not a good reason to have an unnecessarily large CSS file. Gzip doesn't help when your cache size is limited, either. – cimmanon Jul 05 '13 at 10:24
  • Ok thanks, work perfectly ! But I'll try to write something later to merge them, and free some space. – sayam Jul 05 '13 at 10:28
  • @cimmanon, you say that SASS does not support automatic grouping of media queries, and Eric Meyer [recommends](http://stackoverflow.com/a/12824576/901944) to **never** group styles by media queries manually. Then why do you consider the CSS to be **unnecessarily** large? – Andrey Mikhaylov - lolmaus Jul 05 '13 at 11:35
  • I don't believe I said any such thing. If the OP has so many media queries that it is causing the browser to crash, I can only assume the worst and that they've got more than 1-3 media queries per partial. Anything more than that is, yes, unnecessary. – cimmanon Jul 05 '13 at 11:46
  • @cimmanon, IE8 does not support media queries. It crashes due to an unhappy polyfill used. – Andrey Mikhaylov - lolmaus Jul 05 '13 at 11:48
  • I only wanted to group mediaqueries on the .css output, not on .sass (having MQ next to elements is definitely easier to maintain). The main problem was the polyfill (css3-mediaqueries.js) not working with more than 32 media queries. But respond-js seems to work. – sayam Jul 07 '13 at 00:53