Why I love SASS so much

When I finally had the time, to find out what SASS is, my life has changed. :o)

Basically SASS its an extenstion for CSS. Everyone knows that writing in CSS can be boring. You repeat same rules, styles over and over again. Thanks to SASS you can be a little bit closer to sentence “programming in CSS” ;o)

How much better is to write in SASS (and for me easier to read!):

.content{
    p{
        /* some stuff */
        strong{
            /* some color */
        }
    }
 
    a{
        /* some stuff */
    }
    span{
        /* some color */
    }
}

than what I really hate:

.content p{
    /* some stuff */
}
.content p strong{
     /* some color */
}
.content a{
    /* some stuff */
}
.content span{
    /* some color */
}

It is easier to read, I do not have to paste ‘.content’ at the beginning all the time, all nesting are created automatically, because when writing in SASS (that above) as a result I get CSS (that below).

We’ve got variables, mixins (which we can compare to functions – afterfunctions are use for reuse in many places), nesting, ‘for’ and other things. If someone does not know yet what is it, head over to documentation.

Why variables?

How many times have I thought: “it would be easier to define a colour at the beginning that is repeated in diffrent places and just paste the name of that variable which is easier to remember, than to look which was blue, and which light blue”. With SASS I can do that

$blue: #0000FF;
$lblue:#A3D1FF;

.content{
    strong{
        color:$blue;
    }
    p{
        color:$lblue;
    }
    h1{
        border-bottom:1px solid $blue;
    }
}

What are we using mixins for?

The same thing we use functions in programming languages. Only the contents of that function is more like CSS ;o) I think the best example of using mixins is CSS Framework Compass (I also adore it). The first example off the the top of my head single-box-shadow. Just write a single-box-shadow($color, $hoff, $voff, $blur, $spread, $inset) and all the necessary browsers prefixes, syntax etc are set automatically after compiling a file.

Why Compass?

It’s a little skipping, but if I mention about it there’s need to be a few words of explanation. Compass is a collection of mixins. If anyone will interested in SASS and begin to actively use it, sooner or later will create their own mixins which will be used between projects. But do not re-invent the wheel. Compass has a lot of built-in features that really make life easier for web developers. In particular, useful if you want to use the rules of CSS3, Compass will add up for us that damn prefixes -webkit-,-moz-and so on. Of course it is not all. Everything is described in the documentation.

What’s more?

I love SASS and compass. For many people, getting to know them may seem a waste of time, but since I have done it, I spend less time to prepare a stylesheet for a new project. Most sites have common elements. You always define a container/wrapper, there is always the header, footer, some rules for paragraphs, links, menu. There are many common elements between projects. Just prepare some prototypes, collections of mixins, variables, and simply customize these files to the project. For this purpose it is best to use file _base.scss. This is described in details in the best practices on the Compass site.

I change faith to SASS

You need to install Ruby so that SASS works properly. Configuration of Compass is as easy as the installation form at Compass site.

Since the structure of my folders in the project looks the same, I have prepared a model of config.rb file and I only need to change in it the name of root directory.

I work with scss files. To get CSS syntax I simply need to type compass compile [path / to / project] in comand line – for me compass and sass are inseparable couple. However, if I open command line in the background and type compass watch [path / to / project] then any changes in the scss file are compiled immediately – the window must be open all the time. By the way, for this I have .bat file which contain that one line, so when I want to start working it is only a double click of a mouse ;o)

I think anyone who appreciates their time, flexibility and the principle of DRY (Do not repeat yourself) will fall in love with SASS and Compass ;o)