Sass, simply put, is a CSS extension language. CSS describes the way a page looks. CSS rules define colors, sizes, shapes, locations and can describe the way changes take place. Sass adds to CSS. Standard CSS is completely compatible which makes it easy to start. Just rename the filename to a sass extension and presto you have Sass. With Sass you can start using variables, functions, loops, and much more.

This post will focus on getting Sass started on your Jekyll project. There are some great tutorials available on using Sass. I’ll add some links at the end of the post.

If you are not using Jekyll, the installation steps will be completely different. Visit Sass’s website for instructions.

As a side note. Sass comes in two flavors. The first was an indented syntax. It just went by the name of Sass and used the sass extension. This version didn’t use curly braces or the semicolon line ends. And because of that, it wasn’t compatible with standard CSS. A second more compatable version came to be. The new name is Sassy CSS and uses the scss extension. Jekyll understands both. I have decided to go with the newer version. Even though there are more keystrokes, remember you still need the curly braces and the semicolons at the end of the line, standard CSS can be compied pasted directly into a scss file.

Since Jekyll doesn’t care about which version, except that the file extension does tell Jekyll which version of Sass is in the file, I’m not going to worry. I’ll call both Sass.

Installation

If you have Jekyll installed, you have Sass installed. Well, that was simple.

Setup

Crazy part is there really isn’t any setup. Jekyll will look for any scss or sass files and run them through Sass.

Ok, maybe that’s too simple. Really if your going to use Sass fully, you most likely aren’t going to be using only one file. You’ll be breaking your CSS into seprate files. Maybe a file for your variables; which will make it really easy to changes colors or other measurements. A file for functions or mixins would be good for storing common pieces that could go from project to project. Jekyll needs to know where you will store these bits.

Inside the _config.yml file place the following, replacing the _sass with the name of the directory you create to hold the Sass files.

sass:
  sass_dir: _sass 

With this you can break down the CSS into nice chunks and use an @import to call in the other Sass. If Jekyll is already watching your project, you’ll need to restart it any time you change the config file.

At the beginning of the Sass file place two lines of three dashes. These signal Jekyll that the file needs to be processed. Standard CSS files aren’t processed by Jekyll, they are just copied. Below is an example of the dashes.

---
---

Starting off

The easiest way to start is by renaming the CSS file to have a scss extension and place the dashes at the top of the file. This will get the site up and running using Sass, so simple. As your skill in Sass grows, you’ll convert more and more of the standard CSS over to Sass. There are a couple really easy steps that can get you started. Pull out values into varibles and common blocks of code into mixins.

Varibles

Add a file to hold variables. Variables allow you to hold common values to make it much easier to update and modify the site without search

In the variable file start putting the values there like this

$background-color: blue;
$image-height: 10px;

Inside the CSS file replace the values with the varible.

mixins

Mixins are a great way of pulling common parts of the CSS into a single spot. Look through the CSS for sets of common rules that can be pulled out to reduce the amount of repeating code.

A very common set like clearfix, something that would get used in multiple projects.

@mixin clearfix {
  display: inline-block;
  &:after {
    content: ".";
    display: block;
    height: 0;
    clear: both;
    visibility: hidden;
  }
  * html & { height: 1px }
}

Where ever you want to use it just put an include

@include clearfix;

where ever the rules should be put.

Continue on

In no way have I even scratched the surface.

Blogs

TheSassWay - great blog focused on Sass.

Sass Offical Page - Not really a blog but it is the offical web site.

CSS-Tricks - All around great CSS blog, search for Sass to get their Sass focused articles.

Tutorials

Free

LevelUpTuts has a 27 video course on Youtube.

Premium

CodeSchool has a set of courses that cover Sass. Monthly subscription is required for most