firebug/firebug — pull request #45 by jc4rp3nt3r (2012-10-01 21:13:06+00:00)
Title: Making firebug's Style Side Panel aware of less css & Sass debug info

With the increasing popularity of CSS coding frameworks like less & Sass, the CSS wilderness is a changing. At its simplest level, these frameworks offer bundling of files (many CSS files into 1) to limit HTTP requests for more responsive online applications.

This causes a serious headache for developers when using firebug, as it is reporting the file name and line number in the bundled file (Note: This is accurate from the client side perspective, but it makes development difficult). On the server side however, the actual rule could be in one of many files, and even when the file name is correct, the line line numbers are inaccurate due to the server side importing of the other CSS files.

However, these frameworks provide an option to output a /* CSS Comment */ including the original line number and file name where the rule is declared, removing the confusion.

This pull request simply sniffs for a .less or .sass file and parses the comment if it finds one. Else, it doesn't touch anything. The footprint for this code update is very small and I attempted to use the existing source cache to make this a near zero-impact addition to an already amazing plugin.

I have seen a fair number of requests for this functionality, and someone even put together a Sass plugin at one point, but it no longer works and seems to been abandoned.

http://www.lesscss.org/
http://www.dotlesscss.org/
http://sass-lang.com/