foxfirefey: A guy looking ridiculous by doing a fashionable posing with a mouse, slinging the cord over his shoulders. (geek)
foxfirefey ([personal profile] foxfirefey) wrote in [site community profile] dw_dev2013-12-27 12:39 pm
Entry tags:

Quick tip on SASS and source maps

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!
fu: Close-up of Fu, bringing a scoop of water to her mouth (Default)

[staff profile] fu 2013-12-28 04:34 am (UTC)(link)
Ahhhhhh thank you :) That's going to be very useful.
ninetydegrees: Drawing: a girl's pale face, with a yellow and green stripe over her right eye (Default)

[personal profile] ninetydegrees 2014-03-02 03:46 pm (UTC)(link)
Hey Fey! Should we report any display issue we notice or is it too soon? If we should where and how? Is there a special place for this or would Zilla do?