Advertisement

Using Compass and Sass for CSS in your Next Project

by

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 http://sass-lang.com/

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 960.gs. 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.

Installation

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:

    #header
      :width 900px
      :background #111
      a
        :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)

    compass

    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

    Variables

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

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

    Compiling this, would give you:

    Math

    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.

    Mixins

    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:

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

    And to use, you would do something like:

    #header
      :width 900px
      :background #111
      +rounded

    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:

    #header
      :width 900px
      :background #111
      +rounded(8px)

    Importing

    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.

    Conclusion

    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.

    Links

    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.