Is Sass CSS with Superpowers?

If you start using Sass, you never want to write CSS by hand again.

If you're new to frontend development like me, maybe you heard or read that, but what is Sass, and is it really that amazing?

Sass (short for syntactically awesome style sheets) is a preprocessor scripting language that is interpreted or compiled into Cascading Style Sheets (CSS). The indented syntax and SCSS files are traditionally given the extensions .sass and .scss, respectively.  (Wikipedia, n.d.).

In other words, it is a program that takes one data type (Sass) and converts it to another data type (CSS) and is fully compatible with all versions of CSS.

When I started to get comfortable using CSS, things started to get complicated and the stylesheets got longer and longer, and to be honest, it sometimes feels like a mess. So I tried Sass and enjoyed it.

It is very similar to CSS but is easier to write, and I don't have to repeat myself as the principle (DRY) advice. 

Some of the principal features are:

Variables let you store information that you want to reuse throughout your stylesheet. You can store things like colors, fonts, etc.

Nesting in Sass will allow you to nest your CSS selectors in a way that follows a visual hierarchy, it's simple and useful, and you can use the “&” character to get a reference of the parent selector. 

But you should be careful that excess nested rules will result in overly qualified CSS which is a bad practice.

Partials in Sass will allow you to create small Sass files that you can include in other Sass files. Thanks to the @import rule, a partial is created by naming it with an underscore: _buttons.scss.

This is a great way to keep your code tidy.

Mixes (reusable style blocks) A mixin allows you to make groups of CSS statements that you want to reuse throughout your code.

In conclusion, Sass is amazing it is the evolution of CSS and will make your life easier,  you don’t need to know Ruby or be an expert in the command line to use it, you only need an extension like  VSCode Extension (Live Sass Compiler) that help you to compile your Sass/Scss files to CSS files. 

But if you are still learning CSS, it is better to wait a bit until you understand the basics of CSS. There are other preprocessors like LESS, Stylus, but at the moment, Sass is the most popular.

References

The Sass website (2020). Retrieved from https://sass-lang.com/

Sass (stylesheet language) -Wikipedia (n.d.). Retrieved from https://en.wikipedia.org/wiki/Sass_(stylesheet_language)

Live Sass Compiler (2020). Retrieved from https://marketplace.visualstudio.com/items?itemName=ritwickdey.live-sass