Sass for Designers — The Setup

As an accompaniment to my post on Sass for Designers (why and how you should use Sass) I thought I’d better include a quick writeup on my setup for working with Sass in the hope that it’ll help you get started. I’m afraid I work on a OS X, so my instructions will only be good for Macs.

Of course, all of this can be done with the command line and other terrifying tools. I’m very impressed by those who can remember all the commands and quickly get everything working silently in the background. I don’t find this very easy, and prefer to use apps to help me out.


Codekit does all the processing for you. It takes your Sass and spits it out into fully-working CSS. It does loads of other clever things too, but I mostly just use it for Sass. Go download it and give it a go. I think you’ll find it’s definitely worth paying for.

screenshot of the Codekit website

In order to get started with Codekit and Sass, you’ll need a /sass folder in your project where you keep all your Sass files. Sass files can contain plain old CSS or Sass-style CSS but they must have the extension .scss.

screenshot showing .scss file in the /sass folder

Next you open Codekit and add your project folder in the Files section.

screenshot of adding a new project to the Files pane in Codekit

After you’ve added your project folder, Codekit will automatically find the Sass file inside your project.

screenshot of a project in Codekit

If you then go into your .scss file and add some Sass, as soon as you save that file, Codekit will compile it into CSS for you.

screenshot of basic Sass being written into a .scss file

If you go to the Log tab in Codekit, you can see that your Sass was successfully compiled into CSS.

screenshot of the Log in Codekit showing a file successfully compiled

If you then go back to look in your project folder, you can see where Codekit has compiled your CSS into a /css folder containing a .css file. It’s this file that you will reference in your HTML, not the .scss file.

screenshot showing the /css folder created by Codekit

Codekit is very smart. If you write invalid Sass, it will give you an error. This can be really helpful if you’re new to writing Sass. For example, here I’ve used a # hash symbol instead of a $ dollar sign when creating a variable.

screenshot of invalid Sass using # instead of $

As with all validators, it’s not always easy to understand what the validation error message means (!) but it can be helpful to be pointed towards the line where the error occurs.

screenshot of Codekit showing an error in the Sass

And you’re done

Those are the very basics you need when getting started with Sass. If anyone has any further suggestions for Sass tools, particularly on other OSes, please let me know!

One comment

  1. Dave Rutter
    Hi Laura

    You may have seen this already since writing this post but Hammer app looks very interesting ([](" rel="nofollow)). OSX only again I’m afraid. The in development may also be of interest, especially for multi-device testing.

    I’ve just come across your site and really enjoyed digging around. Keep up the good work.

Categorised under: Markup. Tagged with: Codekit, CSS, preprocessors, Sass.