Dec. 27th, 2013

foxfirefey: A guy looking ridiculous by doing a fashionable posing with a mouse, slinging the cord over his shoulders. (geek)
[personal profile] 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!

Profile

dw_dev: The word "develop" using the Swirly D logo.  (Default)
Dreamwidth Open Source Development

June 2025

S M T W T F S
1234567
89101112 1314
15161718192021
22232425262728
2930     

Most Popular Tags

Style Credit

Expand Cut Tags

No cut tags
Page generated Jul. 3rd, 2025 07:56 pm
Powered by Dreamwidth Studios