Create a gist now

Instantly share code, notes, and snippets.

Jekyll Plugin to output SCSS without requiring the "---" YAML Front Matter
# Jekyll Generator for SCSS
# (File paths in this description relative to jekyll project root directory)
# Place this file in ./_plugins
# Place .scss files in ./_scss
# Compiles .scss files in ./_scss to .css files in whatever directory you indicated in your config
# Config file placed in ./_sass/config.rb
require 'sass'
require 'pathname'
require 'compass'
require 'compass/exec'
module Jekyll
class CompassGenerator < Generator
safe true
def generate(site)
Dir.chdir File.expand_path('../_sass', File.dirname(__FILE__)) do!

Very cool use of compass. Have you seen Jekyll Asset Pipeline? It has a similar workflow and supports both CSS and JS conversion.

jwebcat commented Mar 29, 2013

how do you get this to compile into the _site folder? What are your config.rb compass settings?

pauljz commented Apr 5, 2013

@jwebcat here's an example config.rb that seems to be working for me:

http_path = "/"
sass_dir = "./"
css_dir = "../css"
images_dir = "../img"
javascripts_dir = "../js"
relative_assets = true

I noticed the following problem with this plugin:

Jekyll calls the generators after it assembled a list of all the files that need to be copied to _site/. This means that the generated CSS files are not picked up in the first run. Only if you run jekyll build a second time the CSS files will be copied. Simply run rm -rf css/ _site/ && jekyll build and verfiy that there is no _site/css/ directory.

I updated this plugin to notify Jekyll about the generated files:

jimyuan commented Feb 13, 2015

Hi, I use this plug-in and use a 3rd mixin for css sprits, but I always got error $map value, error like this: 'No such file or directory - /Users/jim/Sites/proj_name/_sass/../img/generated//Users/jim/Sites/proj_name/_sass/../img/light-s2cd528e0fe.png', I don't know whether this plugin changed the path, thx!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment