Skip to content

@wolfeidau /sass_converter.rb
Created

Embed URL

HTTPS clone URL

Subversion checkout URL

You can clone with
or
.
Download ZIP
Sass plugin for Jekyll
module Jekyll
# Sass plugin to convert .scss to .css
#
# Note: This is configured to use the new css like syntax available in sass.
require 'sass'
class SassConverter < Converter
safe true
priority :low
def matches(ext)
ext =~ /scss/i
end
def output_ext(ext)
".css"
end
def convert(content)
begin
puts "Performing Sass Conversion."
engine = Sass::Engine.new(content, :syntax => :scss, :load_paths => ["./css/"])
engine.render
rescue StandardError => e
puts "!!! SASS Error: " + e.message
end
end
end
end
@dburrows

To get @imports to work I had to set the load path explicitly:

engine = Sass::Engine.new(content, :syntax => :scss, :load_paths => ["./css/"])
@wolfeidau
Owner

Thanks a lot @dburrows much appreciated, I have updated the GIST and will push it into my site!

@simon-ohara

To change the way sass outputs css I found I needed to add a style option where you instantiate the Sass::Engine. To use the compressed output I used:

engine = Sass::Engine.new( content, :syntax => :scss, :load_paths => ["./css/"], :style => :compressed )

Without it the output is the default nested style, however you can choose either :expanded, :compact or :compressed as per the Output Style options from the sass reference page.

@tomraithel

Thanks for this. I´ve added an additional line in the rescue clause to produce a visible error on the page itself and not only in the log file. Helped me a lot during development:

rescue StandardError => e
  error = "!!! SASS Error: #{e.message} !!!"
  puts error
  "body:before{ content:\"#{error}\"; color: red; font-size: 20px; }"
end
@matthodan

This may be overkill, but for a more complete solution you may want to use an asset pipeline. The Jekyll Asset Pipeline gem supports most languages (e.g. Scss, Less, CoffeeScript, Erb, etc.) and has a bunch of features (e.g. asset tagging, minification, gzipping, etc.) that set it apart. It also seems to be the fastest growing Jekyll-related gem these days, which I take to mean that it is gaining traction in the community.

@jkneb

I added a colorize function to highlight sass errors in the console output:

def colorize(text, color)
  "#{color}#{text}\e[0m"
end

Then applyied it on the error thrown by Sass:

puts colorize("SASS Error: "+e.message, "\e[31m")

e[31m = red

Run jekyll serve --watch to see the errors colorized in red.

Cheers! :)

@omarfouad

Thanks @wolfeidau. I have put this plugin in the _plugins directory of my jekyll project but I can't figure out why my scss files are not converted. Am I missing something?

Thanks!

@omarfouad

Thanks @wolfeidau. I have put this plugin in the _plugins directory of my jekyll project but I can't figure out why my scss files are not converted. Am I missing something?

Thanks!

@cjdsie

I'm in the same boat as @omarfouad. I've added it and nothing is converting for me. What am I missing?

@jeffkamo

@cjdsie, @omarfouad. I think you have to make sure you include a YAML front-matter statement at the top of any file (in this case a scss file) that you want to convert.

This is mentioned in Jekyll's Plugin page under Converters: "Jekyll will only convert files that have a YAML header at the top, even for converters you add using a plugin."

For example:

---
title: stylesheet.scss
---

body { background: red; }

That seemed to do the trick for me.

@tamouse

Front matter can be empty, thus

---
---

should work as well.

@homeyer

Had to change
engine = Sass::Engine.new(content, :syntax => :scss, :load_paths => ["./css/"])
to
engine = Sass::Engine.new(content, :syntax => :scss, :load_paths => ["#{@config['source']}/css/"])

to support running jekyll build with a different --source flag

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.