Skip to content
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
Compass::Exec::SubCommandUI.new(%w(compile)).run!
end
end
end
end
@matthodan

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

@jwebcat
jwebcat commented Mar 29, 2013

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

@pauljz
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
@Grandrath

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: https://gist.github.com/Grandrath/8282339

@jimyuan
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
Something went wrong with that request. Please try again.