respond.js + nested media queries (IE8)

[kasperoo]

Hi,

using 'img-retina' mixin, it will create a nested media query for retina devices only.

However, in IE8, respond.js would stop parsing the css file as soon as it meets that nested query, leading to some major issues such as potentially entire page not looking great on desktop (if say, you used retina mixin somewhere in the top of your code).

I had to manually move all my retina css to the bottom of my SCSS file so they will be parsed last and respond.js won't mess things up.

Any advice on how to tackle nested media queries?

[cvrebert]

Relative Sass newbie here, but based on http://sass-lang.com/documentation/file.SASS_REFERENCE.html#media it sounds like Sass ought to already flatten such nested media queries... How are you compiling your Sass files?

[kasperoo]

Interesting! I am currently using Visual Studio's Web Essentials. I don't think SASS out of the box can do it, however, after reading your post I've found gulp.js' task for it instead

https://www.npmjs.com/package/gulp-combine-media-queries

That should solve it for me, thanks!

[glebm]

This is a feature of Sass, appeared at some point in 3.2.x, I've just confirmed and it works with 3.2.19. However, Visual Studio uses libsass, and while the issue is fixed on libsass master the fix has not been released yet.
See sass/libsass#812 for the release timeline, and sass/libsass#185 for the issue itself. Meanwhile, it's best to use Ruby Sass.