In my previous article, I’ve been writing about a plethora of tools for the design process. I’m not one of those people who will say that this is THE tool for the job. This is a story about a useful tool that made my life easier, and as I learn it more it’s becoming more and more time and nerve saving.

Why do you need Compass?

CSS is a quite straightforward language with easy to learn syntax. It can be easily and quickly written to follow any design need, and it’s not that hard to end up with a pretty long style sheet. Of course, a good developer should write with the loading speed, compatibility, maintainability and reusability of code.

However, on a large scale project, code can become quite overwhelming.

This is where Compass steps in. It is a set of tools and libraries of common code patterns that will save you time, and help you produce cleaner markup.

Sass (Syntactically Awesome StyleSheets)

Compass owes its existence to Sass that extends CSS with variables, nested rules, mixins, inline imports and more. All these "extensions" in practice doesn't mean that you'll have to change your coding habits and learn new syntax. Sass is designed in such a way that soon you'll begin to wonder why these features are not part of standard CSS.

For example, using variables is quite simple, first, you define them and later you can re-use them or even apply useful functions to them.

$blue: #3bbfce;
$margin: 16px;

.content-navigation {
	border-color: $blue;
	color: darken($blue, 9%);
}

.border {
	padding: $margin / 2;
	margin: $margin / 2;
	border-color: $blue;
}Code language: PHP (php)

.content-navigation {
	border-color: #3bbfce;
	color: #2b9eab;
}

.border {
	padding: 8px;
	margin: 8px;
	border-color: #3bbfce;
}Code language: CSS (css)

Nesting is my second favourite feature that allows you to "group" certain rules. Instead of writing three separate rules, you can "nest" them into the parent selector. The common navigation code usually have these rules:

#nav {
	background: #ccc;
}

#nav li {
	float: left;
}

#nav li a {
	display: block;
}Code language: CSS (css)

In Scss you could group all rules under #nav:

#nav {
	background: #ccc;

	li {
	float: left;

		a {
			display: block;
		}
	}
}Code language: SCSS (scss)

These two examples just scratch the surface of endless possibilities that Compass/Sass duo can offer us. This is as well an introduction to my series of tutorials on the subject.

In the meantime go grab Compass at http://compass-style.org/ and start playing with it NOW!