This repository was archived by the owner on Dec 16, 2025. It is now read-only.
Repository navigation
This repository was archived by the owner on Dec 16, 2025. It is now read-only.
Fix for SCSS debug info #148
Description
When including debug info in files created with Compass/SCSS, Respond.js won't work. An easy fix is to add "(?![\s]*-)" to the regex on line 109.
Before:
var qs = styles.match( /@media[^\{]+\{([^\{\}]*\{[^\}\{]*\})+/gi )After:
var qs = styles.match( /@media(?![\s]*-)[^\{]+\{([^\{\}]*\{[^\}\{]*\})+/gi ),The skips media queries of the following type:
@media -sass-debug-info{filename{font-family:<filename>}line{font-family:<line>}}
Activity
paulirish commentedon Aug 2, 2012
tbh it seems kind of inappropriate for respond to handle the nasty debuginfo annotations.
marcvangend commentedon Feb 21, 2013
Paul, I understand your point of view, but it cost me hours to find out that this was breaking respond.js. I accept debugging as part of my job, but it would be great if we can prevent other people from running into the same trouble.
flokli commentedon Feb 27, 2013
Nope. At least in IE8, the "fix" from above doesn't work.
paulirish commentedon Feb 27, 2013
@marcvangend yeah i agree with my. my earlier comment was.. wrong. :)
penx commentedon Jun 24, 2013
agreed, please fix this, I also just spent an hour or so debugging respond before finding out the issue is with the scss debug output.
scottjehl commentedon Jun 24, 2013
Would it be adequate to update the readme with a clear warning of potential conflicts with scss debug output? Working around it seems excessive for this script, but being clear about it up-front seems responsible and helpful.
Thoughts?
On Jun 24, 2013, at 5:21 AM, penx notifications@github.com wrote:
marcvangend commentedon Jun 26, 2013
If there is no acceptable workaround or fix, adding a clear warning to the readme is the least we should do, IMO.
That said, I'm not sure if I would call that solution "adequate". Let's face it: people don't read readme's in advance, but only when something breaks. If you enable respond.js and it doesn't work immediately, it's a no-brainer to check the readme. But suppose that respond.js is already working, you enable the SASS debug info, and the next day you discover that your responsive design breaks in IE8... Then checking the respond.js readme is not the first thing that comes to mind.
scottjehl commentedon Jun 26, 2013
My concern is working around an edge case that is generated only when debugging Sass. Complicating the source code to work around an issue that won't likely occur in production environments (or non-sass environements) seems less than ideal. If we could update the readme that'd be a great first step. Anyone able to help on this?
On Jun 26, 2013, at 10:43 AM, marcvangend notifications@github.com wrote:
Darep commentedon Aug 15, 2013
Just ran into this problem myself, also. Spent about an hour, not understanding what the hell is going on. The moment I looked at the generated CSS I figured it was the the source maps with their funky
@media -sass-debug-infosyntax :D This should definitely be documented in the readme, at the very least. I'll probably create a PR.I can understand the point about not wanting to over-complicate the source code, or mess with a working system. (If it aint' broken, etc.) But it's lame that I have to disable source maps and restart Rails everytime I want to test IE, making IE testing even more cumbersome. Boo. Non-code-changing solution would be nice.
PS. Respond.js rocks and you're awesome ❤️
jefflembeck commentedon Nov 20, 2013
Pulled the README related piece in here. A code-changing solution might be a solution for the deep future, but not currently.
Added gotcha remarks on default yeoman webapp generator producing sas…