SASS

CSS can be really fun, but also kind of a pain. It doesn’t add much in the way of functionality but is still really important. Its main drawback is the lack of visual hierarchy found in HTML, Ruby etc. This tends to lead to long, bloated CSS files, which are annoying to trawl through and hard to maintain for a team larger than one person.

CSS preprocessors allow you to write nested CSS, use variables, and perform calculations, among other things, as we will see below.

What’s the difference between SASS and LESS?

SASS is written in Ruby, and LESS is written in JavaScript. SASS is the more popular of the two. A big benefit of SASS is that once you have told it to watch your project it will watch for changes, whereas LESS will not. There is also another preprocessor, Stylus, though its library is relatively small and it hasn’t been around for as long as the other two.

How do I get started?

On Mac, you can use a GUI application like Compass or Koala, but the easiest way is to install it is simply using the command line:

gem install sass

Then, watch for changes in your style folder:

sass --watch [name of style folder]

As long as you keep the window open, SASS will look for .scss and .sass files and convert them to .css for you, letting you know with a helpful terminal message. If you make changes to them, it will update the generated CSS. As it’s looking, it also tells you if there’s an error in your code, unlike normal CSS.

Why is it called SASS if the extension is .scss?

Actually, SASS uses both .sass and .scss, but SCSS is considered to be the more modern syntax. One of the biggest complaints when SASS was originally released was that .sass was too different to normal CSS. Instead of curly brackets, it required indentation. Enter SCSS. SCSS is actually a superset of CSS, i.e. any valid CSS is also valid SCSS. It’s a little less concise than SASS but there’s no learning curve.

@extend

The @extend feature of SASS helps to avoid redundancy in our code by using the same properties from one selector in another, similar to extend in Ruby.

h3 inherits from h2, with an additional property of font size.

Calculations

You can also do lots of basic calculations using SASS, which is helpful for positioning things.

In conclusion, SASS can definitely be helpful, but the benefits only really outweigh the cost of learning it for larger-scale, long-term projects that will be modified by multiple people.