Instantly share code, notes, and snippets.

What would you like to do?
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!

This comment has been minimized.

matthodan commented Dec 18, 2012

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


This comment has been minimized.

jwebcat commented Mar 29, 2013

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


This comment has been minimized.

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

This comment has been minimized.

Grandrath commented Jan 6, 2014

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:


This comment has been minimized.

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!


This comment has been minimized.

foxx commented Apr 12, 2017

To use this, you need to add gem "compass" to your Gemfile, otherwise you'll get;

/var/lib/gems/2.3.0/gems/jekyll-3.4.3/lib/jekyll/external.rb:53:in `rescue in block in require_with_graceful_fail': /repo/site/_plugins/generator_scss.rb (Jekyll::Errors::MissingDependencyException)
	from /var/lib/gems/2.3.0/gems/jekyll-3.4.3/lib/jekyll/external.rb:41:in `block in require_with_graceful_fail'
	from /var/lib/gems/2.3.0/gems/jekyll-3.4.3/lib/jekyll/external.rb:40:in `each'
	from /var/lib/gems/2.3.0/gems/jekyll-3.4.3/lib/jekyll/external.rb:40:in `require_with_graceful_fail'
	from /var/lib/gems/2.3.0/gems/jekyll-3.4.3/lib/jekyll/plugin_manager.rb:73:in `block in require_plugin_files'
	from /var/lib/gems/2.3.0/gems/jekyll-3.4.3/lib/jekyll/plugin_manager.rb:71:in `each'
	from /var/lib/gems/2.3.0/gems/jekyll-3.4.3/lib/jekyll/plugin_manager.rb:71:in `require_plugin_files'
	from /var/lib/gems/2.3.0/gems/jekyll-3.4.3/lib/jekyll/plugin_manager.rb:18:in `conscientious_require'
	from /var/lib/gems/2.3.0/gems/jekyll-3.4.3/lib/jekyll/site.rb:111:in `setup'
	from /var/lib/gems/2.3.0/gems/jekyll-3.4.3/lib/jekyll/site.rb:33:in `initialize'
	from /var/lib/gems/2.3.0/gems/jekyll-3.4.3/lib/jekyll/commands/build.rb:28:in `new'
	from /var/lib/gems/2.3.0/gems/jekyll-3.4.3/lib/jekyll/commands/build.rb:28:in `process'
	from /var/lib/gems/2.3.0/gems/jekyll-3.4.3/lib/jekyll/commands/build.rb:16:in `block (2 levels) in init_with_program'
	from /var/lib/gems/2.3.0/gems/mercenary-0.3.6/lib/mercenary/command.rb:220:in `block in execute'
	from /var/lib/gems/2.3.0/gems/mercenary-0.3.6/lib/mercenary/command.rb:220:in `each'
	from /var/lib/gems/2.3.0/gems/mercenary-0.3.6/lib/mercenary/command.rb:220:in `execute'
	from /var/lib/gems/2.3.0/gems/mercenary-0.3.6/lib/mercenary/program.rb:42:in `go'
	from /var/lib/gems/2.3.0/gems/mercenary-0.3.6/lib/mercenary.rb:19:in `program'
	from /var/lib/gems/2.3.0/gems/jekyll-3.4.3/exe/jekyll:13:in `<top (required)>'
	from /usr/local/bin/jekyll:23:in `load'
	from /usr/local/bin/jekyll:23:in `<main>'
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment