Integrating Compass and Jekyll Without Plugins

I find myself getting closer to the point where I’m done with the scaffolding and can finally start with the design. The more fun stuff I look at the more I realize that integrating Compass is probably a good idea.

I don’t like plugins unless absolutely necessarry so while I’m sure the jekyll-compass plugin is great, I decided to figure out how to add Compass to my Jekyll/Octopress 3 site without any plugins.

Here’s what I did.

  • Add compass to your gemfile
  • Install compass bundle install --binstubs --path=vendor
  • Run Compass for the first time so it generates a config file bundle exec compass create --bare --sass-dir "_sass" --css-dir "css" --images-dir "images"
    • This command creates a config.rb file wiht compass settings that are compatible with Jekyll
  • Move the default Jekyll css/main.css to _sass/main.css
    • remove the yaml frontmatter from the file once you’ve moved it to the _sass directory
  • Delete the css directory
  • Update rakefile to run compass compile before building
desc "build the site"
task :build do
  system "bundle exec compass compile"
  system "bundle exec jekyll build"
  system "bundle exec rake minify_html"
  system "bundle exec rake optimizeimages"
end
  • Run bundle exec rake build
  • NOTE - compression settings are no longer set in _config.yml, you’ll need to add the following line to config.rb in oroder to compress css output_style = :compressed

  • Update rakefile to run compass watch and jekyll serve together
##############
#   Develop  #
##############

# Useful for development
# It watches for chagnes and updates when it finds them

desc "Watch the site and regenerate when it changes"
task :watch do
  puts "Starting to watch source with Jekyll and Compass."
  system "compass compile" unless File.exist?("css/main.css")
  system "jekyll build"
  jekyllPid = Process.spawn("jekyll serve --watch")
  compassPid = Process.spawn("compass watch")

  trap("INT") {
    [jekyllPid, compassPid].each { |pid| Process.kill(9, pid) rescue Errno::ESRCH }
    exit 0
  }

  [jekyllPid, compassPid].each { |pid| Process.wait(pid) }
end
  • Now you can run bundle exec rake watch and it runs compass watch & jekyll serve together.

Now you can use Compass mixins and import partials by adding @import compass/blahblahblah to your _sass/main.scss file. Running bundle exec rake build will then run compass compile to create your css/main.scss file, followed by jekyll build which will move that css/main.scss to _site/css/main.css

In short:

  • you can store any partials you want to in the _sass directory (or subdirectories)
  • you can import these partials via your main.scss file
  • any partials imported will be compiled into a single file (css/main.scss) when you run compass compile
  • the css/main.scss file will be built into _site/css/main.css when you run jekyll build
  • any partials not imported by your _sass/main.scss file will not be used