Getting started with Sass

Jan 14, 2013

Table of contents:

Installing Sass
Sass + CodeKit
Cool things you can do with Sass
Conclusion

Sass (Syntactically Awesome Stylesheets) is a preprocessor extension language for CSS that makes it possible to use the power of preprocessing in your stylesheets. This means you can use all kinds of new and interesting techniques when writing CSS that will improve your workflow, reduce the amount of code you have to write and ensure your end product is of a higher quality.

You might be thinking, “Ok, I know how to write CSS, why do I need Sass?”. Sass will dramatically improve your life as a CSS wrangler so much so, that going back to regular old CSS feels like stepping back in time.

If you are still unconvinced on the virtues of Sass, read the following post as I give an overview of my favourite features and how they have improved my work life.

Installing Sass

Sass is a Ruby gem and so if you are running OS X you can just install it straight away as you will already have Ruby installed on your computer. If you are on a Windows machine, take a look at Ruby Installer.

To install the Sass Ruby gem, run the following in Terminal:

gem install sass

Next, fire up your favourite code editor and create a new file called style.scss. When you write Sass, you write it into a file with the .scss extension. This file is then compiled to a .css file that you can use as normal on a website.

To compile the Sass file into a CSS file, simply run the following command in Terminal:

sass -watch style.scss:style.css

Sass + CodeKit

Now I’ll be honest with you, I never use the above method. I was first introduced to Sass through a fantastic app called CodeKit. CodeKit is a like a Web Developer’s best friend.

CodeKit allows you to compile all kinds of different Web Development languages, optimise images and minify your files ready for use in production. CodeKit also makes using Sass a breeze as you don’t have to do anything in the Terminal.

CodeKit is $25, but honestly, it’s worth every penny.

Cool things you can do with Sass

Now that you know how to get up and running with Sass, we can get into all the cool new possibilities that it brings to writing boring old CSS.

This is an ordered list of the features that have had a big impact on my workflow.

1. Importing

If you have ever written CSS for a large website or web application, you will know that your CSS file will get really big. Navigating this file begins to get difficult as it grows in size, and things can become messy when you start having to make changes.

In normal CSS you can import stylesheets into one another which can alleviate some of this problem. However, this can make your website slower because each additional CSS file is another HTTP request that your site has to make. Generally you want to keep your CSS requests down as low as possible, so this isn’t really a solution.

When you are writing in a preprocessor language like PHP for example, it’s really easy to include files within each other. So for example, you might have a footer file that you just include at the bottom of every page so when you need to change your footer text, you only have to do it once.

Sass allows you to import files within each other in much the same way, and because the outcome is all compiled, the output is a single CSS file! This means that you can break each aspect of your CSS down into it’s own clean file so you can maintain separation. When it comes to compiling your CSS, everything is merged into one file.

When I start a new project I will typically use something like normalize.css as a browser reset. With Sass I can just make a new file called reset and then import that into my main Sass file and just forget about it. Having a big reset at the top of a regular CSS file is annoying because you have to scroll past it every time you look at the file.

I usually also split other parts of my CSS down too. So I will have a separate file for a grid, typography, reusable stuff and other useful features of Sass I’ll cover later.

Setting this up is really easy. All you have to do is to create your main Stylesheet, for example style.scss. You then just make a new file for each chunk of your CSS you want to breakdown, like this:

_reset.scss
_variables.scss
_typography.scss
_grid.scss

Notice how each filename begins with an underscore? This means this file is a “partial”, or in other words a file that will be imported into another file. This simply tells Sass that it doesn’t have to compile this file directly as we will never need this file by itself.

Next in your style.scss file, you can simply import the other files like this:

@import "reset";
@import "variables";
@import "typography";
@import "grid";

2. Variables

One of the most annoying things about CSS is the fact that you can’t set variables. So for instance, if you are using a particular shade of blue as the main colour of your site, then you will probably be using it in a lot of different places. But what happens if you need to then change it to a darker shade? Well you would have to do a find and replace or try to pick out each instance manually.

With Sass, you can create your own variables and use them throughout your code.

For example:

$brand-light: #63d1f4;
$brand-dark: #0ebfe9;

Now if you want to change one of your colours, you only have to change it in one place. Also, as I mentioned above, you can store all of your variables in their own clean file, so should you want to make a change, you know exactly where to look.

3. Mixins

When you are writing CSS code for a big website, you will usually have to repeat yourself as you reuse the same sets of styles throughout your project.

Mixins allow you to make your own reusable chunks of code that you can write once and then use anywhere in your CSS. This means if you need to make a little change, you only have to do it once, rather than finding every instance of where you wrote it.

For example:

@mixin rounded-top-left {
  $vert: top;
  $horz: left;
  $radius: 10px;

  border-#{$vert}-#{$horz}-radius: $radius;
  -moz-border-radius-#{$vert}#{$horz}: $radius;
  -webkit-border-#{$vert}-#{$horz}-radius: $radius;
}

#navbar li {
  @include rounded-top-left;
}
#footer {
  @include rounded-top-left;
}

So as you can see, we can quite dramatically reduce the amount of code we have to write by using a mixin. If I wanted to change the radius, I can now change it once to see it reflected everywhere I need it.

Mixins can also be passed arguments that turn them more into functions. By passing an argument you could use the same reusable chunk even if the properties are different.

For example:

@mixin rounded($vert, $horz, $radius: 10px) {
  border-#{$vert}-#{$horz}-radius: $radius;
  -moz-border-radius-#{$vert}#{$horz}: $radius;
  -webkit-border-#{$vert}-#{$horz}-radius: $radius;
}

#navbar li {
  @include rounded(top, left);
}
#footer {
  @include rounded(top, left, 5px);
}
#sidebar {
  @include rounded(top, left, 8px);
}

In this example we create a mixin for producing rounded corners. The radius amount is set as a default of 10px, or you can pass in a specific amount which overrides the default.

4. Nesting

If you’ve ever had to target specific elements through CSS, you might have written something similar to this:

#sidebar .widget h2 {
}
#sidebar .widget .content p {
}
#sidebar .widget .content span {
}
#sidebar .widget .content a:link {
}
#sidebar .widget .content a:visited {
}
#sidebar .widget .content a:hover {
}

This is horrible because you end up repeating yourself lots. Sass allows you to nest selectors under each other so you only have to write it once. For example:

#sidebar {
  background-color: #c1f0f6;
  .widget {
    background-color: #fff;
    border: 1px solid #000;
    .content {
      color: #000;
    }
  }
}

When you are using pseudo selectors like :hover or :visited, you can also nest these so you don’t have to repeat yourself again. For example:

a {
  text-decoration: underline;
  &:hover {
    text-decoration: none;
  }
  &:visited {
    text-decoration: underline;
  }
}

Conclusion

Hopefully if you already write CSS for big projects, the above pain points and solutions will have already caused you to look further into getting started with Sass. I can honestly say, Sass has made my CSS writing a lot better. I can now write CSS that is a better end product and is much more maintainable in the long run. Sass enables you to write CSS quicker, and it makes collaborating on products a lot easier.

Even if you are a relatively newbie to writing CSS, preprocessors are definitely the way forward and so it’s good to start using them right now.

To read more about Sass, check out the Sass website.