Geek Answers Handbook

Debugging Sass in Chrome on OSX

I am on OSX and I would like to be able to debug the generated Sass CSS in the Chrome (or Canary) developer tools using the new source function described. I use Sass and Compass.

I followed the good instructions here to get Sass to create the source map file. In the interest of anyone struggling with this, the steps are:

  • Install a preview version of Sass with sudo gem install sass --pre
  • Check out the version of Compass - you need 12.2, not 13 alpha. If you need to remove it, you can do it with sudo gem uninstall compass --version 0.13.alpha.2 .
  • Add this to config.rb sass_options = {:sourcemap => true} .
  • Go to the folder that contains your config.rb and run sass --compass --sourcemap --watch scss:css (this tells Sass to compile the files in the scss folder to the CSS files in the css folder).

If everything works correctly, when you make changes to one of our scss files (say styles.scss), Sass will compile a new CSS file - at the same time, it will create a file called styles.css.map that contains the mapping information, which should allow Chrome to tell you the source SCSS file when you select an item in the developer tools.

I successfully received my Sass creating this file. But unfortunately, Chrome doesn't want to do anything about it. I did what seems recommended:

  • Install Chrome Canary
  • Go to chrome: // flags and enable the option "Enable developer tools" experiments "
  • Open the tools for web developers (Function-12), click on the hexadecimal window in the lower right corner of the window and on the "General" tab, check "Include Source Cards" and on the "Experiments" tab, check "Sass Support".
  • Restart canary

But when I check the item in the Developer Tools, I just get the same old link to the crappy CSS file. I want to see where the element styles appear in the SCSS file. Has anyone been lucky with this on Chrome OSX or even FireSass?

+4
source share
2 answers

Source maps really work in OSX Chrome! I have several stylesheets in my dev environment, and I stupidly inspected styles belonging to a stylesheet that did not yet have a .css.map file. If you follow the steps above, this should work for you, perhaps even with the current version of Chrome.

+2
source

Those who have problems with the current preliminary version of SASS and the compass: you are not alone and there is a workaround!

The current version of the pre-release is not compatible with the compass. You should be able to run the "compass" command without error, and while you have the alpha version 162 installed, you get a LoadError.

Instead, install version 141 with the following command:

 gem install sass -v 3.3.0.alpha.141 --pre

Note: you need the current stable version of the compass, not the preview version. The preliminary version of the compass does not seem to work with build 162 or 141. In addition, you must install the compass before the preliminary version of sass, as the compass will also install the current released version of sass.

Hope this helps!

+8
source

More articles:


All Articles