Navigate your CSS using Compass

Marko RosicWeb DevelopmentLeave a Comment

In my previous article I’ve been writing about plethora of tools for 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 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 straight forward 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 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 you coding habits and learn new syntax. Sass is designed in such 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;
}

 

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

.border {
    padding: 8px;
    margin: 8px;
    border-color: #3bbfce;
}

Nesting is my second favorite 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;
}

In Scss you could group all rules under #nav:

#nav {
    background: #ccc;

    li {
        float: left;

        a {
            display: block;
        }
    }
}

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!

Share

Previous Article
Next Article