How can I make Respond.js and LESS.js play nice together?

Question

I can't get Respond.js to work when I make responsive layouts with LESS.js and @media queries. Anyone ever figure out how to make it work?

Answer 1

Respond.js works in the following way: Browsers don't expose all rules to the DOM or even the text inside a style sheet, and that means that unsupported features like media queries in old browsers don't get exposed. To be able to polyfill media queries it downloads the css file itself (hoping it's in the cache) and runs some regular expressions on it to filter out the media queries. Than it adds the styleRules relevant for the window's dimension dynamically inside a newly embedded stylesheet so even browsers that don't support media queries "see" those styleRules.

I'm not that familiar with less.js' codebase but glancing over it it seems to work in pretty much the same way, the processing is different and the result is a totally generated stylesheet from the .less file, but the principle is roughly the same.

Given the fact that respond.js needs to download a file and the respond.update() also doesn't work on generated stylesheets because of that i would think that this isn't possible without changing either script.

hope it helps PM5544