4cpmaq
Last Updated: February 25, 2016
·
1.5K
· christianboyle

Sass Sleuth Setup

http://www.mobify.com/dev/sass-sleuth-debugging-sass-in-webkit-browsers/

Great tool. Having not used Firesass previously a few things tripped me up during the setup, so I figured I'd share in case others were running into similar issues.

1.) While developing locally (localhost/XAMPP/Livereload) my config.rb looks like this:

httppath = "/"
css
dir = "stylesheets"
sassdir = "sass"
images
dir = "images"
javascriptsdir = "javascripts"
fonts
dir = "fonts/"
outputstyle = :expanded
sass
options = {:debuginfo => true}

  1. ) After adding sass_options, I exit "compass watch" in Terminal, then restart using:

compass watch --debug-info

3.) Close Chrome, open Sass Sleuth

4.) Inspect an element to verify it looks like this: http://cl.ly/image/1Z1T111d1v4... (notice the .scss extention rather than .css)

5.) Fist pump