Sass is so cool!

I have to admit that I didn´t know almost anything about CSS six months ago. I was an API developer and I never needed it. But now, everything has changed (I know, it should have changed before, but it didn´t). I need to improve my CSS skills and I need to do it quickly!

The thing is, I don't really like CSS. I find it a bit confusing and, every time I try to do something I end up doing a mess. What can I do? I need to learn SASS (Syntactically Awesome StyleSheets)!

SASS to the rescue
This is the first line you can read on the SASS page:

Sass makes CSS fun again.

And, do you know what? It is true!

What makes SASS funny
For me, SASS is funny because it brings programming concepts to CSS, and I love programming :D

Variables in SASS
Corey Haines said on Twitter that this year's color was #CB6586. If I start to use this color on my CSS I have two problems:

1. If I want to change it on january 1st of 2012 with the 2012 color I'm going to find all the places I'm using it (DRY violation).
2. I am not a color machine. #CB6586 does not mean anything to me (Not readable).

SASS solves those two problems with variables. We can define our color as:

And we can use that variable everywhere we want:

Mixins in SASS
Another DRY violation that I used to do with CSS is when I have to define effects (round borders, shadows, gradients, etc...) to the elements. I end up writing the same more than once (probably because I don't know almost anything about CSS, but probably because it is a very easy thing to do with CSS). SASS helps me to define mixins so I don't repeat my "code" every now and then.
An example of how to define a mixin to apply a gradient can be this one:

And we can use it like this:

Did you notice it? Mixins accepts arguments! How awesome is that?

More SASS awesomeness
You can find more cool SASS features on the official page. It is very simple and very useful!

Enjoy it!