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:
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";
$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. I also had to replace
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.