Sass and Compass

It's first week of August, and it means it's time for continuation of JavaScript Developer Toolkit series. Last month we talked about Sass and I promised I would elaborate on the topic with Compass. So let's talk about Compass.

What is Compass?

Compass helps Sass authors write smarter stylesheets and empowers a community of designers and developers to create and share powerful frameworks. Put simply, Compass is a Sass framework designed to make the work of styling the web smooth and efficient. Since it's based on Sass, it's compiled into regular CSS rules and is not required to be installed on production environment. Let's start with installing it on our machine:

gem install compass

Yes, it's Ruby again and you'll have to live with that. If the command is not recognized, then you probably haven't installed the Ruby on your computer. To do so, please read the JavaScript Developer Toolkit article.

Compass is made up of three main components. It includes a library of Sass mixins and utilities, a system for integrating with application environments, and a platform for building frameworks and extensions. In order to start working with Compass, one should set-up a new project using it's CLI. We'll call ours sample:

compass create sample

Features

Let's look over some most useful features of the framework like css-reset, grids, css3 and sprites.

Reset CSS

The goal of a reset stylesheet is to reduce browser inconsistencies in things like default line heights, margins and font sizes of headings, and so on. The general reasoning behind this was discussed here.

@import "compass/reset"

It will insert the reset rules code into your CSS file.

Grid System with Compass

A grid is a layout framework that helps you make efficient use of whitespace in your web pages, providing uniform dimensions for columns and rows of content, as well as other whitespace elements like margins and gutters. Compass support both most used grid frameworks Blueprint and 960.gs; you can use which ever you prefer.

Blueprint

The blueprint core team, while having never officially announced that the project is over, has through negligence, caused the project to fall behind. It has not kept up with layout and responsive approaches that are essential to web design nowadays. As a result, as of Compass 0.3, it has been taken away from Compass's core. If you do still prefer to work with it, you'll have to install the plugin. Later just create a new project and all the files will be auto-generated.

gem install compass-blueprint

compass create sample --using blueprint/basic

960.gs

Similarly to Blueprint, a plugin is needed to make the framework workable. Install the plugin and create a new project.

gem install compass-960-plugin

compass create -r ninesixty sample --using 960

CSS3 and Compass

Compass also removes the headache of typing vendor specific CSS3 rules like border-radius. It does it through the usage of predefined mixins:

@import "compass/css3";
.notice {
 @include border-radius(15px);
}

Have a look at notice class above and see how it will be transformed once Compass is done with it.

.notice {
 -moz-border-radius: 15px;
 -webkit-border-radius: 15px;
 -o-border-radius: 15px;
 -ms-border-radius: 15px;
 border-radius: 15px;
}

Compass supports nearly all CSS3 rules and even provides cool features like PIE through plugins.

compass install compass/pie

After installing the plugin, you'll be able to use some of the CSS3 features in older IE browser.

@import "compass/css3/pie";
.rounded {
 @include pie;
 @include border-radius(15px);
}

Sprites

If you've even worked with sprites, then you knew that it was tedious work and required a great deal of effort. Every image needs to be measured, and its position in the sprite map needs to be recorded in your stylesheets. Maintenance is a nightmare. If you haven't, then you should start to and Compass will help you with this. To gain some knowledge about the sprites, have a look at this.

@import "compass/utilities/sprites";
@import "icons/*.png";

Firstly we include the correct module and then direct the Compass to our image folder from which sprites will be created. This will create a sprite file laying out the images vertically. It can be through customization.

Having the sprite in place, we can use the build-in mixin all-<map>-sprites to create classes of all the images in the sprite, where map is the name of our sprite folder - in our case icons. The classes are created in a .<foldername>-<filename> format, so if we had add.png file in our icons folder, the appropriate class will be named as icons-add. You can later extend these classes and add additional rules. For instance:

.icons-add { background-position: -43px -24px; }
.add-button { @extend .icons-add; }

If you'd like to add only specific image to your current CSS file, then another mixin should be used - <map>-sprite($name), where map is our sprite folder and name our file name.

@import "compass/utilities/sprites";
@import "icons/*.png";
.add-button {
 @include icons-sprite(add);
}

There are numerous mixins and published extensions already present on Compass site and even more can be found on Sache site. Have a look, play around - there is lot to find there.

Tools

Compass team offers an app for 10$, which helps designers to compile stylesheets easily without using to command line interface. Developers however should not use such atrocities, cause from CLI comes the Force :)

Both WebStorm and Sublime Text support Sass and Compass. If you're using Sublime Text, try installing this package and read more about it's integration here. WebStorm users get the Sass support built-in starting from 8th version and can install plugin manually on lower versions. For more details read their blog.