Using Compass and Sass for CSS in your Next Project


Sass could potentially be called CSS 2.0; it has some really nifty features that allow you to write your code in less time and with more flexibility. In today's article, we will be working the basics!

What is Sass?

Sass is simply a different way to work with CSS. It allows you to keep your CSS code very simple and helps increase readability. It takes something like this:

And turns it into:

You can check out Sass at

What is Compass?

Compass makes working with Sass even easier. The author, Chris Eppstein, has also included some converted frameworks such as Blueprint, YUI, and It also easily integrates with Ruby based projects, but is just as easy to add to any other project. Compass is open-source and is extremely well documented. Check out the source and documentation.


Both Sass (which is part of the Haml Project) and Compass are installed through RubyGems. If you dont have any clue what I am talking about, check out "Step 1 - Installing Ruby on Rails" of my previous article Ruby on Rails for Designers, and follow the steps down until you hit the section named "Installing Rails".

To install both of these gems, we can just run a single command:

(sudo) gem install haml chriseppstein-compass

As long as it says that it successfully installed both gems, you are good to go!

Project Setup

If you are working with a Ruby-based project then check out the documentation as it will explain how to get it working with your specific framework, but I'll assume we are working with a simple HTML or the like project.

The compass command has a lot of options, and if you run compass --help, you might see:

FYI: The next to top line that says "Loading haml-edge gem." is because I use the latest version, so you don't need to worry about it if yours says something different.

Now we are going to start our Compass project. To create run the following command (including the trailing period, that tells compass where we want to make our project!)

compass  --sass-dir=sass .

And you should see:

Where initializing, Compass would normally default to having the Sass in a folder name src, but I wanted to change that so I added the option. If you look at the folder, you should see a file named config.rb and two other folders.

The config.rb is the configuration that Compass looks at, but most of the time you wont need to mess with this. Also, like the output from the creation command says, we have three ways of updating our CSS from our Sass:

  • compass - using this option, you would have to be in the correct directory, and then Compass would compile your Sass once.
  • compass -u path/to/project - this is about the same as the command as above, but you do not have to be in the project directory, and rather pass in it with the command.
  • compass --watch [path/to/project] - this command is pretty awesome in that it watches for any changes to your Sass files and will automatically recompile them whenever a change is detected.
  • Now that you know how to setup a project, I'll explain some of the "rules" of working with Sass

    Sass Syntax

    Normally when writing CSS, you would write something like:

    #header {width: 900px; background:#111;}
    #header a {color:#000; text-decoration:none;}

    One of the problems with that is that you are repeating the same name many times. Lets make this into Sass. I am going to be working in the screen.sass file, so delete everything and your Sass would like:

      :width 900px
      :background #111
        :color #000
        :text-decoration none

    Personally, that it much easier to read and write this way, no curly braces or semicolons. The way that Sass understand the nesting is through indentation.

    The first selector is not indented at all so the final CSS with start with that. Also, all properties, (so color, height width, etc) begin with a colon. So for the properties for #header they are indented. It does not matter if you use tabs or spaces, but you must remain consistent, otherwise you will see an error (which I'll show in just a minute).

    So now that you have your properties, we have our next selector. Since this is indented to the same as the properties, the CSS output will be #header a ...

    Now that we are this far, lets try compiling: (in your project directory)


    And voila!

    Let's say that you didn't indent everything the same, Compass would error:

    Now, once you know CSS, Sass wont be very much of a learning curve, as the main difference when getting started is the different formatting rules. Next, we will get working with some of the more advanced (but cooler!) parts of Sass.

    Features of Sass


    One awesome feature of Sass is it's ability to use variables. An example:

    !link_color = #fff
      :width 900px
      :background #111
        :color = !link_color
        :text-decoration none

    Compiling this, would give you:


    You may be laughing at this title, but its true, you can do math in Sass! For this demonstration, we will be using Sass's interactive mode, so run:

    sass -i

    And a little messing around would give you:

    Or a more visual approach:

    #111 - #999 = #000


    #111 + #999 = #aaa


    #398191 + #111 = #4a92a2


    #398191 - #111 = #287080


    Apart from addition and subtraction, you can also multiply and divide:

    #398191 / 2 = #1c4048


    #398191 * 2 = #72ffff


    To exit the Sass interactive mode, keypress Control-C, and then type "end", and press enter.


    If you have ever heard of keeping your code DRY, DRY means "don't repeat yourself." Mixins allow you to do just that. For example, with the gaining popularity of rounded corners, you may want to create a mixin to handle that, so somewhere, (not under a selector) you would add:

      :border-radius 4px
      :-moz-border-radius 4px
      :-webkit-border-radius 4px

    And to use, you would do something like:

      :width 900px
      :background #111

    And when compiled:

    Lets say though, you may want the border radius to be variable - well you can have a mixin expect to be passed some values. Changing our mixin, it would look like:

    =rounded(!radius = 4px)
      :border-radius = !radius
      :-moz-border-radius = !radius
      :-webkit-border-radius = !radius

    And then to use you could use what we did before, and then the value would default to 4px, otherwise:

      :width 900px
      :background #111


    Sass also has the ability to import other Sass files, so lets say you wanted to import a file (in the same as this sass file), you would add:

    @import reset.sass

    This feature is really nice in giving you the ability the keep extraneous styles outside your main file. For example, you could also keep a mixins sass file that you copied around projects and then a simple import would add that code it - no copy and paste.


    I hope you understand the basics of using Sass and Compass and will possibly use it in your next project! Now, if you are like I was when I found Sass, and said "I don't need this!", give it a try. I've switched over to it for all of my recent projects and I really enjoy working with it.


    Here are a few links that may help you along the way:

    • The Sass Reference contains what I talked about today and much much more. Definitely worth a look if you are serious about Sass.
    • The TextMate bundle for Sass is great and I use it often.
    • The official screencast for Compass, while long, covers about every base with Compass and Sass.

    Related Posts
    • Web Design
      An Overview of My Shopify Workflow ToolsShopify thumb
      Following the publication of the recent Shopify Theme Series I have had a few people get in touch and ask me about some of the workflow tools I use when building themes. Let's look at just a few of them.Read More…
    • Web Design
      Why I Choose Stylus (And You Should Too)Stylus thumb
      The world of front end web development has been steadily increasing its uptake of what we call "CSS Preprocessors", which extend the functionality of regular CSS. Arguably the two most well known, with the greatest user base, are LESS and Sass/SCSS. However there is a third preprocessor that hasn't received quite as much attention, and that's Stylus.Read More…
    • Web Design
      Building the Merry Christmas Web App InterfaceXmas build 2 retina
      Today we're going to build the Merry Christmas Web App Interface; a Photoshop layout from an earlier tutorial by Tomas Laurinavicius.Read More…
    • Code
      HTML & CSS
      AbsurdJS or Why I Wrote My Own CSS PreprocessorAbsurd 400
      As a front-end developer, I'm writing a lot of CSS and using pure CSS is not the most efficient way nowadays. CSS preprocessors are something which have helped me a lot. My first impression was that I finally found the perfect tool. These have a bunch of features, great support, free resources and so on. This is all true and it still applies, but after several projects, I realized that the world is not so perfect. There are two main CSS preprocessors - LESS and SASS. There are some others, but I have experience with only these two. In the first part of this article I'll share with you what I don't like about preprocessors and then in the second part I'll show you how I managed to solve most of the problems that I had.Read More…
    • Web Design
      Foundation's Sassy Styles ExplainedFoundation sass retina1
      In this tutorial we'll cover what can be done with the flexible Sass styles included in the Foundation framework. A lot of these offer a more customisable feature set than that of the CSS version, plus there are shortcuts which can be used to style items such as the top bar quickly and easily.Read More…
    • Web Design
      Setting up Foundation With Sass and CompassFoundation sass retina
      Sass is a great way to speed up front-end development in general, I use it in every one of my projects. Sass (as with all other preprocessors) allows for nested styles, functions and prewritten code in what are called mixins. Foundation has a few different versions, currently we've covered the most common HTML/CSS variants, but now let's talk about a version built on Sass.Read More…