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 ;)

Tags: 

Drupal
SASS
CSS
Planet Drupal
CodeKit
Compass
Sprites