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 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:

1	(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!)

1	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:

1	#header {width: 900px; background:#111;}
2	#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:

1	@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.