Disclaimer, I got this to work but these are notes from my first attempt so some of this may be overkill. A lot of the information I found was over a year old so I’m probably using some work-arounds that are no longer necessary. I’ll be back to make corrections as needed. If you notice anything wrong please let me know in the comments. For the most official info check out Working with CSS Preprocessors on the Google developer pages
I’ve been a Firefox loyalist for a while and I’m still a huge fan but it’s become increasingly clear to me that Chrome DevTools is surpassing Firebug and my full conversion to Chrome has been imminent for a while. A couple of days ago, I broke down and installed RES, ColorZilla and ABP in Chrome and decided to really dive in to Dev Tools.
Today, after about an hour of trial and error, I was able to get SASS debugging to work in Chrome. So, sorry Firebug, we’ve had some great times together but I’m seeing someone else now.
Enough rambling. Here’s my workflow:
I’m running a CentOS Vagrant box, generated by PuPHPet, in VirtualBox for Windows 8. My source is in a local directory that’s mounted in my VM and I’m using PHPStorm to edit all my files. I’m using Foundation and Compass to build a WordPress child theme based on Reverie and I’d like to be able to debug SASS in Chrome. (Inhales deeply)
Compass Setup
In your guest, start by installing the compass gem:
$ Gem install compass
I’m using version 0.12.3
You don’t need to install the SASS gem since compass installs it automatically but you may need to update it. You’ll need to be running at least sass 3.3.0 for source maps to work. I’m running 3.3.3
You can run the following to check your version and update if you need to.
$ gem list sass $ gem update sass
You’ll also need to install the compass-sourcemaps gem iso that the .map file is generated along with your output.
$ Gem install compass-sourcemaps --pre
This is something I’m not totally sure about; I think there are efforts to include this in compass without requiring an extra gem so you may not need this. I’m going to come back and try doing this without it and update the post later on.
In my case, I already had a project directory so, instead of running a command to set up a compass project, I just dropped a config.db file in my child them directory (See below) . As you can see, I’m telling Compass to watch the scss directory and output to the css directory. So, when I run $ compass watch from that directory, it’s going to look at every .scss file in the scss directory and output a .css file with the same name in the css directory. The sourcemap options at the bottom ensure that a .map file is output along with the any .css files. The sourcemap is what chrome dev tools looks for to allow you to debug SASS in the browser. You used to be able to use the SASS debug option but Chrome requires sourcemap now.
config.rb file:
# Require any additional compass plugins here.
# Set this to the root of your project when deployed:
http_path = "/"
css_dir = "css"
sass_dir = "scss"
images_dir = "images"
javascripts_dir = "javascripts"
cache_path = "/tmp/.sass-cache"
# You can select your preferred output style here (can be overridden via the command line):
# output_style = :expanded or :nested or :compact or :compressed
output_style = :expanded
# To enable relative paths to assets via compass helper functions. Uncomment:
# relative_assets = true
# To disable debugging comments that display the original location of your selectors. Uncomment:
#line_comments = false
# If you prefer the indented syntax, you might want to regenerate this
# project again passing --syntax sass, or you can uncomment this:
# preferred_syntax = :sass
# and then run:
# sass-convert -R --from scss --to sass sass scss && rm -rf sass && mv scss sass
# debug
# sass_options = {:debug_info => true}
#sourcemaps
sass_options = {:sourcemap => true}
enable_sourcemaps = true
Now you can run compass
$ compass watch
You should see Compass polling for changes. If you edit a .scss file in the scss directory, depending on whether or not there’s already a css file output, you’ll either see Compass create a .css file in your css directory or overwrite an existing one. If there isn’t already a source map, you’ll see a message that one has been created.
If everything is set up properly, your scss should be outputting css and you’re halfway there.
Chrome Setup
To get SASS working in Dev Tools, go to the general settings and check ‘Enable CSS source maps’ and ‘Auto-reload generated CSS.’ Under the workspace settings, click to add a folder and navigate to your local project directory; in my case I just chose my main WordPress directory. I also went to ‘chrome://flags/’ and enabled dev tools experiments – This may not be necessary since I don’t think SASS support in dev tools is an experiment anymore, but just to be safe.
Finally, if everything is in place, you should be able to see references to your scss in Dev tools. Here’s proof that it’s working for me:
Hope this helps. If you want to debug SASS in Dev tools and this doesn’t work for you, I highly recommend putting in some time to Google around and get it working. This is cool stuff and it’s definitely worth the effort. I found a lot of answers to problems I was having in this Sourcemap Support issue on GitHub. Some of that stuff might not be relevant anymore though. As I said, I’ll be back to make updates as needed; leave a comment if I got something wrong.