The League of Extraordinary Developers

0113 815 0986


Whilst working on client projects we often find useful bits of information out. Where possible we blog about that information to pass on our knowledge. Below are some of our most recent entries.

Screengrab of the new LED site

SASS, Compass and some clarity

Having recently read HOW TO: Get Started With the COMPASS CSS Framework, I realised there is still a lot of confusion about SASS and Compass and why developers should be using them. The Mashable article is very brief and the comments below it highlight show some of the confusion surrounding the tools.

My issue with the article is that it really talks about SASS and not Compass, it doesn't even show one example of the CSS3 features and it doesn't explain the separation between the two and the benefits of using them.

Hopefully in this post I want to try and clear up what SASS is, what Compass is, and why, as a developer, you should let them into your life. This post won't go into detail about each tool, but will hopefully just give you enough of a push to investigate further. The post will also try and deal with some of the common misconceptions I've heard and read from other developers.

What is SASS

SASS is simply an extension to existing CSS features. Some of the main features include:

  • Variables
  • Mixins
  • Nesting
  • Selector Inheritance

Some of features are so useful that they are being proposed to the CSS Working Group - CSSOM, Vars, Mixins, Nesting, and Modules.

Other useful features include:

Some developers originally ignored SASS because it used a different syntax to CSS, but a while ago this all changed with the release of the SCSS format. SCSS uses the exact same formatting as standard CSS, so if you can write CSS, you can write SCSS.

SASS isn't the only tool that extends the capability of CSS, however once you add in the power of Compass it should be clear why developers should be choosing SASS above the other tools.

What is Compass

Compass is an open source CSS authoring framework that makes a developer's life much easier.

If you want a simpler way to maintain your grid layouts, an easier way to remember all the variations in CSS3 syntax, and a way to reuse lots of standard CSS patterns quickly, then Compass is for you.

Compass is built on top of SASS, so you get all the benefits of SASS as well.

At it's most simplistic level, Compass provides a huge amount of mixins that developers can use of to reduce the maintenance of their CSS.

Some of the main features of Compass include:

Compass also has a number of plugins that can be added to the core features to give you even more to simplify your CSS. Some of the plugins are listed here, however doing a quick search on github will reveal quite a few more.


"But I don't want to use Rails"

This is a pretty common argument for not using SASS or Compass. Yes, SASS and Compass rely on Ruby, but you don't have to be using Ruby on Rails to use them. They are completely stand-alone tools and I've even used them when developing simple static pages. The only thing you do need is Ruby, as they are Ruby gems. The download page of the SASS site explains how to do that.

"But I don't want to install Ruby on my server"

Don't then. Yes, you do need Ruby on your development machine, but that's as far as you need to go. SASS compiles down to bog standard CSS so all you actually need to put onto your server is the generated CSS files.

"I don't like SASS, I prefer LESS"

In the Mashable article, one of the comments compares LESS and Compass. They are two completely different things. Sure compare LESS and SASS, but LESS and Compass are not comparable.

"But I can write proper CSS from scratch, I don't need something to do that for me"

As web developers we can all do that, but the point is that SASS and Compass offer us a way of writing more manageable code. I can guarantee you that when using these tools, you will be writing less code, changes will be quicker and easier, and therefore cheaper.

Additional reading

This blog post deliberately doesn't show many code examples, as there is just too much to cover. If you want to see some more specific examples, here are some useful references.

Finishing up

So in short, SASS and Compass are here to make CSS creation and maintenance simpler and quicker, leaving you with time to do other things to make your sites even better.

This post doesn't even scratch the surface of the capabilities of SASS and Compass, but hopefully it explains what they are and gives you a hint as to why you be using them as part of your development stack.

The big question is do you want to be maintaining code that looks like this?

.box-shadow-example div {
  width: 40px;
  height: 40px;
  background: #eeeeee;
  margin: 20px;
  float: left;
#box-shadow-default {
  -moz-box-shadow: 0px 0px 5px #333333;
  -webkit-box-shadow: 0px 0px 5px #333333;
  -o-box-shadow: 0px 0px 5px #333333;
  box-shadow: 0px 0px 5px #333333;
#box-shadow-custom {
  -moz-box-shadow: red 2px 2px 10px;
  -webkit-box-shadow: red 2px 2px 10px;
  -o-box-shadow: red 2px 2px 10px;
  box-shadow: red 2px 2px 10px;
#box-shadow-custom-multiple {
  -moz-box-shadow: rgba(0, 0, 255, 0.4) 0 0 25px, rgba(0, 128, 0, 0.2) 0 0 3px 1px inset;
  -webkit-box-shadow: rgba(0, 0, 255, 0.4) 0 0 25px, rgba(0, 128, 0, 0.2) 0 0 3px 1px inset;
  -o-box-shadow: rgba(0, 0, 255, 0.4) 0 0 25px, rgba(0, 128, 0, 0.2) 0 0 3px 1px inset;
  box-shadow: rgba(0, 0, 255, 0.4) 0 0 25px, rgba(0, 128, 0, 0.2) 0 0 3px 1px inset;

Or like this?

@import "compass/css3";
.box-shadow-example div {
  width: 40px;
  height: 40px;
  background: #eeeeee;
  margin: 20px;
  float: left; }
// Default single box shadow
#box-shadow-default {
  @include single-box-shadow; }
// Box shadow with custom settings
#box-shadow-custom {
  @include box-shadow(red 2px 2px 10px); }
#box-shadow-custom-multiple {
  @include box-shadow(rgba(blue, 0.4) 0 0 25px, rgba(green, 0.2) 0 0 3px 1px inset); }
blog comments powered by Disqus

Read more entries

Keep up to date

Blog RSS feed

Want to find out more?

If we have piqued your interest then we'd love to hear from you.

Get in contact with us


  • Ruby on Rails
  • .Net
  • PHP
  • HTML5
  • CSS3
  • JavaScript
  • Web Apps
  • Mobile Web Apps
  • iOS Apps


  1. Blog title
    C4DI and the magical coffee beans
    Post Date
    Thursday, September 05 2013
  1. Blog title
    Designers - how far should their coding knowledge go?
    Post Date
    Thursday, May 30 2013
  1. Blog title
    Twitter Bootstrap - It's not all roses
    Post Date
    Friday, June 22 2012
  1. Blog title
    Keep your requests thin
    Post Date
    Friday, January 06 2012
  1. Blog title
    Storing a Product Catalog for eCommerce with a Document Database
    Post Date
    Monday, November 21 2011
  1. Blog title
    Success for Incentive Maker - Hull Digital Post
    Post Date
    Friday, July 08 2011