Skip to content

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!
Copy link

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.

Copy link

jwebcat commented Mar 29, 2013

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

Copy link

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

Copy link

mgrandrath 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:

Copy link

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!

Copy link

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