2016-03-12

Mini-post: Getting Jekyll to use Compass

I ran into some issues with this, so I decided to make a post about it in order to help others.

I'll assume you've already installed jekyll-compass, and have added it to the gems list in _config.yml, and I'll assume you came to this blog post to try and figure out why Jekyll is giving errors and complaining that Compass things don't exist. Well, here's the short answer for how to fix it:

Remove the Liquid front matter from your main.scss (and/or similar other files). Done.

The long answer is that Jekyll will automatically try to use its in-built Sass compiler for any .scss or .sass files it finds with a Liquid front matter. Installing jekyll-compass doesn't do anything to the in-built compiler; it just makes Compass compile all the Sass files as well.

This is pretty annoying, as if you, say, try to add @import "compass/css3"; to one of your Sass files, Compass will compile it fine but when Jekyll's in-built Sass compiler tries to compile it, everything will break and the build will be stopped.

Luckily, getting Jekyll's Sass to stop compiling Compass' files is trivial; You just need to remove this from main.scss:

---
# Only the main Sass file needs front matter (the dashes are enough)
---

Then Jekyll's Sass compiler ignores it, and Compass is allowed to do its thing in peace.

2020 edit: It turns out Jekyll and Compass was such an annoying combo that I rewrote the blog in Zola. Ruby's ecosystem makes me sad.