Using Compass with Jekyll
Compass is a great stylesheet framework that has received a lot of well-deserved attention recently. It got an additional boost in popularity after being highlighted as featured project in GitHub Rebase #20. In this small post I'll describe how you could use it together with Jekyll. It's not exactly rocket science, but following these steps might save you some time.
sudo gem install chriseppstein-compass
cd your/jekyll/root
compass -f blueprint --sass-dir _sass .
This will create a _sass directory for sass sources, a config.rb file for compass and a grid.png image file. As you might know, prefixing the sass directory with an underscore causes Jekyll to skip over it when it compiles the site. I'm accepting stylesheets as the default directory for compiled css files, however. The next step is optional but recommended. Open _config.yml and add (or modify) an exclude section:
exclude: - config.rb
This is a new feature in Jekyll 0.5.1 which can be used to exclude arbitrary
files from being copied during compilation (note that GitHub Pages still use
Jekyll 0.5.0). Now you're all set for using Sass with the CSS framework of your
choice for styling your site! Just run compass --watch together with
jekyll --server --auto while developing. If you're interested, the
entire source code for this blog (using Compass, of course) is available on GitHub.
If you don't already use Compass and would like to learn more, there's an hour long walk through available on Vimeo.