Lost trying to understand SASS?

I don’t usually make large HOW-TOs, you know. I prefer to make an example of something, and you can progress at your own pace. At least, Is the way I used to learn new things.

In the words of the Sass team, “CSS on its own can be fun, but stylesheets are getting larger, more complex, and harder to maintain. This is where a preprocessor can help. Sass lets you use features that don’t exist in CSS yet like variables, nesting, mixins, inheritance and other nifty goodies that make writing CSS fun again.

Once you start tinkering with Sass, it will take your preprocessed Sass file and save it out as a normal CSS file that you can use in your web site.”

Here I’ll show you a super basic example and, from here, you can progress at your own pace.

$main-font: Helvetica, sans-serif // this line defines the value for the "main-font" variable
$main-color: #fabada // this line defines the variable "primary-color"

body
  font: 14px $main-font // changing all fonts with one modification
  color: $main-color // yes, you can change hundreds of values with one movement =D

// and this is only a comment, hi!

From here, and with a compiler (I recommend Koala) you can start to do your own amazing stylesheets =D

I said to you, this post will be super basic =P