Debugging SASS in Chrome on Windows
OMG! Forget what I wrote below. Get on the Chrome DEV channel. Chrome 24 and up has SASS debuggin support built-in. Full details here:
http://bricss.net/post/33788072565/using-sass-source-maps-in-webkit-inspector
And forget what I wrote below :)
The missing link when using SASS or LESS over vanilla CSS has been the ability to properly debug the sources in Webkit Inspector. Debugging in Firebug has been possible already, but not in Webkit - and especially Chrome which has been the development environment for me and most of my colleagues here/
However, googling on how-to's provide you with enough info to set everything up, though I did encounter most tutorials focus on Mac developers. So I thought I'd sum up the requirements here for people who - like me - are on Windows (for whatever reason ;-).
Here's what my Webkit Inspector on Chrome looks like right now:
First, here's how the entire process works just to make things clear:
You work locally in .scss (or .sass) files.
There's a "sass watch" command running in the background monitoring for changes to these files. When detected, they are recompiled into plain .css files.
The generated .css is (optionally) enriched with debug information providing tracebacks to the originating sass files. This debug information is rendered in css using specific media queries that looks like this:
@media -sass-debug-info{filename{font-family:file\:path\/to\/style.scss}line{font-family:\000042}}
(The debug information values containing the path and line-number are stored in the font-family property, as that's the only one that allows quite an extended character set without getting the browser upset).
By using a Chrome extension called SASS Inspector you get a new pane in the bottom right of webkit inspector providing you with the sass sourcefile info you need. Sass Inspector parses these extra media queries and shows the information provided within in a more readably form.
Let's assume you have never installed anything remotely close to sass or any of its requirements. On Windows, here's what you need to do:
SASS needs Ruby, so install it from here: http://rubyinstaller.org/downloads/ (and check to add Ruby to your PATH)
Open a command propmpt and type
gem install sass
Now make SASS watch your .scss or .sass file or files and provide debug information. You can watch a single file:
sass --debug-info --watch path/to/style.scss:path/to/style.css
Or watch a folder:
sass --debug-info --watch path/to/sass-folder:path/to/css-folder
Then, download the SASS inspector extension for Chrome.
Inspect the webpage that you're testing the above in.
And if you're on a Mac, you really might want to give SASS Sleuth a try.
