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.