We have numerous CSS frameworks(Bulma, Bootstrap, Tailwind, etc.) and CSS preprocessors like LESS, Styl, and Sass, of course. These frameworks have been built to make the life of a front-end developer much easier. In this article, I will show you some awesome features of Sass, a CSS preprocessor I have come to love.
What is SASS?
SASS(Syntactically Awesome Stylesheets) is a CSS pre-processor that allows the use of variables, style nesting, mixins, loops, functions, and a bunch of whole kinds of cool stuff that makes CSS writing faster and more organized. It's CSS with superpowers.
Below are the reasons why I love SASS;
Nested Syntax
Sass allows you to nest your selectors the same way HTML does and this has prevented the need to write selectors multiple times, makes your code neat and organized.
Uses Mixins
Utilizing variables in Sass is incredible yet imagine a scenario where you have tons of code rehashing in your stylesheet more than once. This is when mixins become possibly the most important feature of Sass. Mixins resemble functions in other programming languages like JavaScript. They return values. Mixins let you create code that is to be reused throughout the website. Sass also has functions, so mixins are not to be misplaced as functions.
Extend/Inheritance
Using @extend lets you share a set of CSS properties from one selector to another. This Sass feature is one of the most powerful ever. It helps to keep your code dry by not using multiple class names in your HTML. With your selectors inheriting the styles of other selectors, they can be easily extended when required. Cool, huh?
You could also use Bootstrap with Sass
Knowing Sass could be a bonus if you're working with Bootstrap(which is a CSS framework). Sass gives the ability to modify this CSS framework by customizing its in-built Sass code. You could change some of the bootstrap's variables among all other cool stuff feature offers.
Well-documented with a large community
The large quantity of documentation available online is another benefit of using SASS. You can check out the SASS documentation page here. There are also numerous videos, articles, books, tutorials, etc. offering important resources on Sass. Personally, these are some of my favorites;
Becoming proficient at a tech skill may take a bit of time, so does Sass. But with the help of the official documentation page included in the article, you should be able to fall in love with Sass as I have. Also, you can follow me for more updates because I would be continuing this love story. And who isn't a sucker for love stories?
Ciao!