Every web project starts with everything neat, all CSS is organized in blocks or different CSS files and you know where everything is, right?

Right, until your project gets bigger, deadlines get tight, more developers come on board and someday you notice a strange behavior in some elements of the page. When you inspect their styles you spot lots of css overrides coming from everywhere. This is the moment you realize how messy CSS can be.

Sass is the modern way of doing CSS and can save many lines of code in your stylesheets. This is possible because Sass works with variables, nested syntax and mathematical operations.

In my opinion one of the nicest features of sass is the possibility to write a selector just once and put all styles for that inside it. Do you need a more specific selector under an existing one? Just nest the specifics into the generic one.

Check out the example below taken from their official website. It's awesome how it can "neatify" your code.

/* .sass */

table.hl

margin: 2em 0

td.ln

text-align: right

li

font:

family: serif

weight: bold

size: 1.2em

/* .css */

table.hl {

margin: 2em 0;

}

table.hl td.ln {

text-align: right;

}

li {

font-family: serif;

font-weight: bold;

font-size: 1.2em;

}