Dave Poon - Thoughts and ramblings

Jekyll has been supporting Sass and CoffeeScript out of the box since version 2. But I found there still are limited resources to talk about the Sass set up with Jekyll, and the Jekyll documentation is a bit counter-intuitive for a first time Jekyll blogger. .

Install Sass/SCSS
Create Sass in Jekyll
Link the compiled CSS
Import other Sass files using Sass imports
CSS minification using Sass output style options

Install Sass/SCSS

If you are a Linux user, you can install Sass by using the command line,

$ sudo su -c "gem install sass"

For Mac users, you can install Sass by the following command line on Terminal.app or your preferred command line application such as iTerm 2.

$ gem install sass

Windows users, you can use Ruby Installer, which will give everything you need.

Create Sass/SCSS in Jekyll

You can create .sass or .scss files anywhere you would like in your Jekyll directory. Hold on! You said Sass or SCSS? Usually people just call Sass which represent both different syntax. I personally prefer the SCSS syntax, even though you have to type more than the Sass syntax, but I feel more that I am coding CSS with extra smart features such as variables, mixins, nesting and inheritance rather than coding another DSL.

You can create a .scss file within a public/css directory if you would like to put all your front end assets into the public directory.

jekyll-blog/
├── _includes/
├── _layouts/
├── _posts/
├── public/
│   └── css/
│       └── styles.scss
│   └── js/
│       └── main.js
├── _config.yml
└── index.html

And then add Front Matter block at the top of the file, which mean, the two lines of triple dashes, otherwise it won’t work. Like this:

---
# This is the Front Matter block
---

// Your styles start here
.container {
 background: white;
}

Jekyll will compile your Sass files based on your current file structure if you already started running the Jekyll built-in web server by the jekyll serve command, it will automatically compile your public/css/styles.scss file into a CSS file at _site/public/css/styles.css.

jekyll-blog/
├── _includes/
├── _layouts/
├── _posts/
├── _site/
│   └── public/
│       └── css/
│           └── styles.css/
├── public/
│   └── css/
│       └── styles.scss
│   └── js/
│       └── main.js
├── _config.yml
└── index.html

Link the compiled CSS

Once the complied CSS is in place, we can include a link to the style sheet with the <link> tag in your Jekyll site within the <head> tag. Like this:

<head>
  <link rel="stylesheet" type="text/css" href="/public/css/styles.css">
</head>

Or use the Jekyll site baseurl variable

<head>
  <link rel="stylesheet" type="text/css" href="{{ site.baseurl }}public/css/styles.css">
</head>

Usually we include the external style sheet in the index.html. Or you can create a head.html in the _includes directory to share the same head tag definition by including it in your layout.

Import other Sass/SCSS files using Sass imports

One of the greatest features in Sass is the @import feature. You can import multiple Sass files and compile them into one CSS file.

Put all your .scss files, partials or your UI components in the default Sass directory /_sass. And import all the partials in your main Sass style sheet, in our case, styles.scss is the main Sass style sheet, like this:

---
# This is the Front Matter block
---

// Importing Sass/SCSS partials
@import "grid";
@import "button";
@import "form";

You would like to change the default Sass directory to a different directory, we can define it in the _config.yml file. In our case, we placed all the front end assets in the /public/ directory, we can specify our own Sass directory like this:


# We specify the directory for Jekyll so we can use @imports.
sass:
  sass_dir: public/_scss

Important notes fo you,

The sass_dir works as a load path for Sass imports ONLY, don’t put your main Sass style sheet in the same directory.
Don’t insert Front Matter block in the Sass/SCSS files or partials in the sass_dir. Jekyll will stop converting Sass files, and throw error messages.

CSS minification using Sass output style options

Sass currently supports four different output styles:

The :compressed style will produce the optimal output for production. Turn on and choose the Sass output style in _config.yml, like this:

sass:
  style: compressed

It is simple, right? Thanks Jekyll teams for making designers and bloggers life much easier.