Quick tip on SASS and source maps

[foxfirefey]

So, lately I've been doing a bunch of SASS work for our Foundation revamp. It can get tricky debugging CSS problems sometimes when the CSS is generated by SASS because the line output doesn't really have an easily found relation to the definition you originally made! Fortunately, there are ways to remedy this, so you can get the line number of the rule in the SASS instead of the resulting CSS.

First, you need to compile the CSS with source maps. It adds in the extra information to the CSS output for the debuggers that can read it. Add this to the bottom of config.rb, in dw-free and dw-nonfree, then recompile:

sass_options = {:debug_info => true}

Now you just need to enable the SASS line number output for the browser you are in. For FireFox, use FireSASS. Here are instructions for Chrome. I am sure other browsers have other methods!