Not to mention make it 10 times more elegant

After mastering CSS, one usually tends the make the separation between CSS and any kind of coding logic. Basically, you learn that CSS is as static as HTML is (though some features in CSS3 have some logic in them).

Sass is a clever extension that lets you have some logic (and other tricks) in your CSS, or more accurately, compiles a Sass script to CSS.

The library is based on Ruby, but have no fear if your website is not Ruby based!
It just requires Ruby on your Development machine, to compile the Sass code to CSS.

How to install
For Ubuntu it's as easy as running

1
sudo apt-get install rubygems

1
gem install sass

For windows there's a Ruby installer, which should make it quite easy to install Ruby, afterwards you should be able to install Sass via writing “gem install sass" in the command line (Start->Run->"cmd")

How to compile
a simple compilation goes like this

1
sass style.scss

1
sass --watch style.scss style.css

1
sass --watch app/sass:public/stylesheets

Awesome features
One of the first interesting features I've learned was variables.
This is really useful because you can define a color (or anything else really) on one place and just use it wherever you want in your styles:

1
2
3
4
5
6
7
$orangetone: #FFD24D;
p {
  color:$orangetone;
}
a {
  color:$orangetone;
}

Import
Something that is possible with pure CSS is the @import command.
That command basically lets you separate your CSS files and create a more logical
file structure for your design, for example having base.css, buttons.css, etc.
The one disadvantage to this was that with every @import call the browser would have to
request another file, slowing the loading time.
Sass solves this by combining the files on compilation, letting you organize your Sass files
separately, while not wasting precious loading time.

Functions
There are a lot of functions for Sass, but one of my favorites would definitely be the darken() and lighten() functions.
You could virtually design a whole website using just a few variables and working with these functions.
Given the following Sass code:

1
2
3
4
5
6
7
8
9
10
11
12
13
$color: #C2D1FF;
.wrapper {
    background-color: darken($color, 30%);
    border-radius:4px;
    padding:10px;
    border:5px solid darken($color, 35%);    </p>
<p>}
h1 {
    color: lighten($color,10%)
}
p {
    color: lighten($color,20%)
}

You can imagine how different the page would be just by changing the $color variable.
In fact, no need to imagine it! Check This out, or this or perhaps this.
On those 3 examples only a single line was changed.

There are many other interesting features for Sass, like Nesting and Mixins, I just
mentioned the ones I liked the most.

Another thing I would like to mention is Compass.
Compass provides many tools on top of Sass, such as a Spriting tool, which basically eliminates every problem you’ve ever had with spriting.
No need to worry (or care) about the order of images, the space between them or of sorts.
The spriting tool will just generate a sprite map and store the location of each image inside that sprite map.

Getting updated with the latest additions & abstraction layers to web development is crucial, and could definitely shave off hours if not days of otherwise sisyphean work.