What is Sass?

You’ve probably heard a lot about Sass (Syntactically Awesome Stylesheets), but you might still be a little hazy on what it actually is. Basically, Sass is one of a class of tools called CSS preprocessors. Other popular examples include Less and Stylus. Preprocessors help us code more efficiently by adding special features into normal CSS, such as variables, nested rules, mixins, and more.

Why use it?

Have you ever had to use Find-and-Replace to make edits to colors or fonts in your stylesheet? Have you had to copy blocks of code over to multiple other elements in order for them to have the same custom styles? Do your stylesheets get a little repetitive or hairy sometimes? These are all common predicaments that bother every serious developer. Our cardinal rule, after all, is to keep our code DRY.

Sass helps us do just that.

Sure, a few repeated lines of CSS may not seem like that big of a deal for our small projects in class, but when you’re in charge of managing thousands of code in the real world, whether for a small startup or a big corporation, things can get pretty messy if you’re careless. CSS preprocessors like Sass help us alleviate that risk, and are thus a common requirement in many of today’s job postings.

Sass vs. SCSS

There are actually two kinds of syntax out there for Sass. Check ’em out:

As you can see, .sass syntax removes semicolons and curly brackets, and is arguably easier to type. On the other hand, many find the newer .scss syntax easier to read. In addition, SCSS is fully compliant with CSS, meaning you can rename your .css file to .scss and all your old code will still work. SCSS acts and looks more like your usual CSS, afterall, except with more tricks up its sleeve. If you’re interested in reading more, check out this in-depth comparison.