Minimise your css files with Jekyll and SASS

Written around Mar 10, 2017 - tags: jekyll and sass

A quick tip about making your jekyll blog faster to load and render!

I had some simple .css stylesheets I wanted to minimise and I started looking at js tools to minimise them. Turns out, I can tell Jeyll to compress them with some sass configuration!

Update your Stylesheets

  • Rename your .css files into .scss
  • Add 2 lines of triples dashes to the beginning of each files.

For instance, if you have a main.css

1
2
3
4
5

.highlight code {
  background-color: #49483e;
  border-radius: 0;
  border: 0;
}

Rename to main.scss

1
2
3
4
5
6
7
8

---
---

.highlight code {
  background-color: #49483e;
  border-radius: 0;
  border: 0;
}

Update your configuration

In your _config.yml, add the following:

sass:
  style: compressed

That’s all! Jekyll should minimise the .scss files into .css files.

More documentation on Jekyll’s website