Configuração Sass Sleuth

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

Ótima ferramenta. Não tendo usado o Firesass anteriormente, algumas coisas me atrapalharam durante a configuração, então decidi compartilhar, caso outros estivessem enfrentando problemas semelhantes.

1.) Durante o desenvolvimento local (localhost / XAMPP / Livereload), meu config.rb se parece com isto:

http path = “/”
css
dir = “stylesheets”
sass dir = “sass”
images
dir = “images”
javascripts dir = “javascripts”
fonts
dir = “fonts /” estilo de
saída =: expandido
sass
options = {: debuginfo => verdadeiro}

  1. ) Depois de adicionar sass_options, saio do “compass watch” no Terminal e reinicio usando:

bússola watch –debug-info

3.) Feche o Chrome, abra o Sass Sleuth

4.) Inspecione um elemento para verificar se ele se parece com isto: http://cl.ly/image/1Z1T111d1v4 … (observe a extensão .scss em vez de .css)

5.) Bomba de punho