I was excited to see the Jekyll turns 2.0.0 blog post announcing built-in support for CoffeeScript and SASS. I updated 3till7 and my portfolio to use the latest Jekyll. This in turn meant I did away with my custom plugins for compiling CoffeeScript and LESS, and moved from LESS to SASS. Here on 3till7, I stopped using the Jekyll Asset Pipeline to compile my assets and produce a combined, minified file. Using imports in my .scss files was sufficient for me CSS-wise, and my one CoffeeScript file is small enough that I don’t care it isn’t minified. I actually haven’t checked, but I wouldn’t be surprised if Jekyll 2 supports JavaScript minification like you can do with your SASS.

Moving from LESS to SASS was the most tedious part of the upgrade. I Googled around but couldn’t find a LESS-to-SASS converter. Makes me want to write a naive one that I could throw up as a web site for others to use. I saw mention of a command-line tool but then another forum post said they’d removed the conversion functionality recently, and I wasn’t able to get it to run anyway.

I use Bootstrap on both this site and my portfolio, and Bootstrap recently came out with a SASS version. I copied all the .scss files from that repository’s vendor/assets/stylesheets/ directory into a lib/ directory in my Jekyll site. I renamed lib/bootstrap.scss to lib/bootstrap/_bootstrap.scss and I @import "bootstrap/bootstrap"; in my css/style.scss main stylesheet. I specify in _config.yml that lib/ is my SASS imports directory:

sass:
    style: compressed # nested|expanded|compact|compressed
    sass_dir: lib

I have css/style.scss and that’s actually the only file in css/. It starts out with the following:

---
---

$font-path: "../fonts";
@import "font-awesome/font-awesome";
@import "fonts";

@import "bootstrap/bootstrap";
@import "bootswatch";
@import "syntax";

I specify $font-path here because both Font Awesome and my own lib/_fonts.scss use it. lib/_syntax.scss stores styling for my CodeRay syntax highlighting. My lib/font-awesome/_variables.scss file sets $fa-font-path: $font-path; and then uses $fa-font-path to specify where the Font Awesome font files are.

Unfortunately, Bootswatch only offers their themes to download as plain CSS or LESS, so I had to manually convert my lib/_bootswatch.scss from LESS. Mainly that involved selecting @variable, holding down Cmd-d in Sublime Text, and replacing the @s with $s. I also had to replace .box-shadow(none); with @include box-shadow(none);.

CoffeeScript was even easier to set up than SASS because I didn’t have to convert from anything, I was already using it. In my js/app.coffee file, I just had to add the following lines to the top so Jekyll would know to compile it:

---
---

Jekyll 2 automatically knows to convert *.coffee into *.js, so I end up with _site/js/app.js as desired.

The biggest reason I had for updating Jekyll on both my sites was just the desire to be running the latest version, and to simplify how my sites are built. I prefer to use the built-in asset compilation and be able to remove custom files in _plugins/. Maybe I’ll discover other nice things to take advantage of in version 2, but really I was doing fine on version 1-something that I was using before.

I still can’t host my sites using Github Pages because I have custom plugins, which won’t work with a Github Pages-hosted Jekyll site. Even if custom plugins are never allowed with Github Pages hosting, the next thing I hope to see from Jekyll is built-in Haml compilation. I love using Markdown for my actual posts, but for designing the layout and includes, Haml is so much cleaner than plain HTML. I also use plugins for generating a sitemap, supporting lunr.js search, and generating tag and category lists for the archives page.