I like many others are always looking towards new ways to improve our workflow habit’s so we can cut down on our development time making our day-to-day job much more enjoyable for us and keeps our clients happy, one new technology that has been a big hit for pretty much the last two years now is preprocessors for CSS which can be explained by the following quote by Wikipedia.

In computer science, a preprocessor is a program that processes its input data to produce output that is used as input to another program. The output is said to be a preprocessed form of the input data, which is often used by some subsequent programs like compilers.

We can take advantage of these preprocessors by making simple and advanced maths that normally we couldn’t if we used a plain old .css file, because of these advantages we can also extend the abilities the compilers can manage allowing for the most efficient style sheet a developer could ever hope for.

To jump straight into it i would have to say on a personal level SASS along with Compass are 2 of the most powerful technologies i have ever used for my development, I say this with high confidence as for the last 6 months i have been using LESS which like SASS allows for a simple way of writing your CSS in a way which improves your workflow. If you were to compare SASS and LESS that might look the same at first glance but as you go through what seems like endless layers you will find SASS to be the most powerful preprocessor currently available to developers even without Compass.

See the following for some of the features which i have already used that have made my life easier thus far:

• Mixins
• Variables
• Functions
• Better imports
• Includes
• Interpolation for variables
• For, while and foreach loops

I know that LESS supports some of these features as well and if your project only requires things such as mixins and variables then that would be fine for small projects but from a long term perspective SASS + Compass will suit any project, see the following which are some basic CSS examples using SASS and Compass together.

#container {
    background-color: red;
    padding: 10px;

    h1 & {
        color: red;
    }
}

This would generate the following output:

#container {
    background-color: red;
    padding: 10px;
}

#container h1 {
    color: red;
}

To explain how you actually get this result you first need to understand what the ampersand means when we write something like h1 &, in SASS we can use the following syntax two ways as it means two different things based on where you put the ampersand. The above example shows we define a h1 selector and declare the ampersand which in this case inherits the parent selector we nested the h1 in, if you have followed along so far you have worked out that #container is the magic parent in the example.

See the below which explains the second way you can use the ampersand:

a {
    color: red;
    text-decoration: none;

    &:hover {
        text-decoration: underline;
    }
}

And the result will be:

a {
    color: red;
    text-decoration: none;
}

a:hover {
    text-decoration: underline;
}

Looking at both examples now there isn’t any different apart from the way the syntax works, when we use the ampersand before a pseudo selector/element it SASS automatically knows to inherit the parent before it where as if we define the ampersand part way down the nested selector it inherit the parent selector allowing us to create much short selectors in our SASS and SCSS files. Now that you have a grasp on this really cool feature I’ll show you a couple of more of my favourites which are interpolated variables and for loops.

@for $i from 1 to 3 {
    $size: $i * 10;

    .font-size-#{$size} {
        font-size: #{$size}px;
    }
}

Now before you jump the gun and say this will result in 3 selectors you would be wrong, when we use “to” in SASS it looks at the first parameter we give it and the second parameter and only loops between them which will only result in 2 selectors. See the below:

.font-size-10 {
    font-size: 10px;
}

.font-size-20 {
    font-size: 20px;
}

If you want 3 selectors to be output in your CSS then instead of “to” we can use “through” which goes from 1 through 3 but takes one extra step to get the third selector we would expect, moving on though lets talk about interpolated variables which if your new to you wouldn’t have noticed in the last example even though they we’re looking straight at you. Basically what they are is escaped variables that a prefixed or suffixed string can be used with in order to achieve dynamic values allowing for more maintainable CSS.

A simple way to remember what an interpolated variable is would be to break in down into it’s key elements:

• The pound or hash (this is a dollar sign in PHP)
• followed by an opening curly brace
• then followed by the variable
• and finally closed with a closing curly brace

This is exactly the same way you write the syntax in PHP except the “pound/hash” becomes a “$” dollar sign but it works exactly the same way, now that you have found out some of the reasons why I am already in love with SASS but i recommend you take it for a spin yourself as you will be surprised by how quickly you pick it up.

Hopefully i didn’t rant too much having not written an article in so long but i do hope you found it useful enough to convert yourself to SASS, i will write an article soon about using Compass along side SASS as it offers great benefits in it’s own right.