Use SASS and Compass to streamline your CSS development

You may have heard of CSS preprocessors like SASS and LESS before. And you may have - just like me - never actually used it on a project. But for me, that changed recently. A few weeks ago, during Frontend United, I saw a few presentations that touched this subject and so I decided to put it to the test in our LimoenGroen projects. Because I really dig how it improves our workflow, I’ll show you some examples of what it is and how you can put it to use in your projects.

So, what is a CSS preprocessor?

Tools like SASS and LESS help you to write CSS in a more programmatic way: you can use variables, nesting and even functions & calculations. We chose SASS so we could also use Compass (which is basically a library of functions and add-ons for SASS). With SASS you work in a SCSS file (eg style.scss) which will be converted to a standard CSS file. This conversion can be done automatically every time you make a change to your scss file. An example style.scss with variables and nesting looks like this:

$mainColor = #333;
$defaultSpacing = 10px;
.news {
  margin-bottom: $defaultSpacing;
  background-color: $mainColor;
  h1 {
    padding: $defaultSpacing/2;
  }
  // You can add comments, they are ignored in the processing.
}

When you save the above code, it will be compiled to the following style.css:

.news {  
  margin-bottom:10px;  background-color: #333; 
}
.news h1 { 
  padding: 5px; 
}

If you want to use mixins (functions) you can do that like this:

@mixin rounded($side, $radius: 10px) {
  border-#{$side}-radius: $radius;
  -moz-border-radius-#{$side}: $radius;
  -webkit-border-#{$side}-radius: $radius;
}

And then use this mixin throughout your scss files:

#footer { 
  @include rounded(top, 5px); 
}
#sidebar { 
  @include rounded(left, 8px); 
}

Which will be compiled to the following CSS:

#footer { 
  border-top-radius: 5px; 
  -moz-border-radius-top: 5px; 
  -webkit-border-top-radius: 5px; 
}
#sidebar { 
  border-left-radius: 8px; 
  -moz-border-radius-left: 8px; 
  -webkit-border-left-radius: 8px; 
}

Use Compass to generate image sprites

But what really made my jaw drop is that Compass can even be used to generate image sprites for you. A sprite is one big image containing all icons used on your website (example: see this sprite used on  yahoo.com). Using one sprite instead of dozens is a front-end performance boost: the browser now just has to perform one server call to fetch all your images! But up until now, creating and managing sprites was a burden. Compass takes this hurdle away by enabling you to create such a sprite file for you. Dynamically :)

See this code:

@import "icons/*.png";
@mixin sprite_css($name) {
  @include icons-sprite($name);
  height: icons-sprite-height($name);
  width: icons-sprite-width($name);
}

First you tell Compass in which folder (“icons”) it should find the images. A Compass project has a configuration file (config.rb) in which you set your base images folder. In our project, this is ‘images’, given with the code above, Compass will search for images named ‘images/icons/*.png’. The functions icons-sprite and icons-sprite-height are dynamic function names that would be mysite-sprite and mysite-sprite-height if the icons were saved in the ‘mysite’ folder.

To use this mixin, I can use the following SASS code:

.print-link .icon {
  @include sprite_css(print);
  // print references to print.png
}

.twitter .icon {
  @include sprite_css(twitter);
}

This will generate the following CSS:

.print-link .icon, .twitter .icon { 
  background: url('../images/icons-seb4ceddfc6.png') no-repeat; 
}
.print-link .icon { 
  background-position: 0 -104px; height: 16px; width: 16px; 
}
.twitter .icon { 
  background-position: 0 -12px; height: 12px; width: 12px; 
}

Awesome! For more info about generating sprites with Compass, check the docs.

Cool, but does SASS help me to write better CSS?

SASS is a great tool to write more structured CSS. However, I believe that writing good CSS means re-using classes and preventing the use of long selectors, !important’s and other nasty tricks. Writing CSS in an Object Oriented way really makes a difference; and using SASS only doesn’t help you to achieve this. My advice would be to first study Object Oriented CSS (free tip: buy this PDF, it’s awesome!) and then try out SASS.

Get it up and running!

The easiest way to setup SASS/Compass is to download CodeKit if you’re on a Mac or (if you prefer) use it in your terminal: http://sass-lang.com/ and http://compass-style.org/install/


CodeKit in action

Want to see sprites with Compass in action? Watch this great screencast (and start at 18:00).

Have fun. And be amazed ;)

Next post

Frontend United was awesome!

Read More »

Comments

Drupal?

Hi Baris, have you tried using CodeKit with Drupal? If so what did you do to get it working? I tried it with the latest Zen version without success. Sass by itself seems to be working fine though. 

Worked out of the box

Hi Argus,

sure. I use it on all my Drupal projects and without any problems. What doesn't work for you then? I just drag my theme folder to CodeKit and all works fine. For SASS and Compass, both work. I've never used Zen thought, but I can hardly imagine that that would be a problem?

Well indeed only adding the

Well indeed only adding the theme folder works fine, what I did was add the whole drupal dir.. :) Tnx! The only thing that does not seem to work is the auto-reloading of Safari.

Jep, have the same problem

Jep, have the same problem with the auto refresh feature.Chrome refreshes, but looks like it uses a cached version.

Tried disabling the cache, but didn't resolve the issue.

Speed issue

Hi

Thank you for this nice tutorial. But I think these files are parsed by javascript and converted to css file and included. Does it not make my page slow?

thnx

 

Not by JavaScript

Hi Sahid,

the files are parsed by Compass on your local machine while developing (or by your webserver). This is done only when the sass files change, so just once. JavaScript is not used at all in this setup.