Another installment of my .. is boss series, where I highlight a technology I love. This week, one that I’ve been using for about two years. Its called Sass, and it provides a syntax called SCSS (Sassy CSS), which is an extension of CSS3 that can be compiled down to CSS with a sass compiler.

I’ve used Sass in many projects, even outside of Ruby / Rails, where it is just as valid, only less popular.

By being compiled, Sass is able to add a few amazing features. Here are two of my favorites:

Nesting

A lot of times we want one rule nested inside of the selector of another rule:

#page {
  background: #990000;
}
#page .box {
  color: #fff;
  padding: 10px;
}

We can let Sass/SCSS handle the nesting, with a much more natural syntax:

#page {
  background: #990000;
  .box {
    color: #fff;
    padding: 10px;
  }
}

This can get dangerous quickly if you nest too heavy, so definitely always be mindful of what your SCSS will compile down to.

Variables

How many times have you wished CSS had variables? Sass lets you have them, and also do transforms on them. So you can perform mathematical operations to systematically cut up widths instead of changing numbers in 10 places when you want to change the page width. Or you can darken a master color and use it all over your page. You can end up with your style guide specified as a set of configs and mixins that you load in where you want them. And since it all compiles down before hitting the server, for the client it will be just as fast as a static CSS file (when set up properly).

Some sample usage:

$red: #990000 body {
  background: $red;
}
#page {
  background: darken($red, 20%);
}

There's more

Mixins are a great feature of Sass also, and its absolutely worth checking out more on sass-lang.com.

When you’re done there, your next stop should be at the site for Compass. Compass builds on top of Sass to add more helpers to Sass.

My favorite is their CSS3 Compatibility, which provide cross-browser ways to use things like opacity. You use these helpers and inserted in their place is all of the various ways that browsers want to see those rules. No more googling cross-browser opacity :

@import "compass/css3/opacity";
.box {
  @include opacity(0.5);
}

Wrap-up

If you haven’t already used Sass, I hope I’ve inspired you to go check it out! It’ll really speed up your CSS workflow.