CSS Source Maps in Octopress
I wanted to customize the theme for this [formerly] Octopress blog and so I used Google Chrome's "Inspect Element" feature to view styles - but they are all from screen.css which is compiled from the Sass sources, so I wouldn't immediately know which .scss file to edit.
But Chrome supports CSS Source Maps which lets you trace styles back to their source. In the Chrome developer tool go to "Settings" (gear in the lower right) and click "Enable CSS source maps".
To generate the source maps for Octopress you'll need to use the pre-release versions of the Compass and Sass gems, so set these Gem versions in the Gemfile to:
gem 'compass', '~> 1.0.0.alpha.17'
gem 'sass', '~> 3.3.0.rc.2'
Next you'll need to go into Rakefile and edit the task :preview section and replace the compassPid = ... line with:
compassPid = Process.spawn("bundle exec sass --compass --sourcemap " +
"--watch sass/screen.scss:#{public_dir}/stylesheets/screen.css")
That will create a screen.css.map file which will be served to Chrome and the "Inspect Element" tool now shows the source .scss file as below.
Clicking link for e.g. blog.scss won't bring you to the file because the .scss files aren't served. If you want to, you can add a symlink in the "public" folder back to the "sass" folder, by typing ln -s ../sass public (though Jekyll will delete the symlink when it regenerates the site). I added this command to the preview rake task and then delete the link in the deploy task. See my my customized Rakefile for details.
