5 Best Features of Sass 🏆
Get to know 5 interesting features of Sass that you should use in your next project.
Hello Devs 👋, in today's blog we will be looking at the 5 best 🏆 features of Sass.
You must have heard this name before but do you know how it works and how it can make styling easy peasy like breezy, no? Don't worry let's look at some of the cool features of sass together.
What is sass? 🤔
Sass is basically a preprocessor that compiles the CSS stylesheets for you. When it comes to larger applications maintaining the CSS files readability and reusability can be very difficult 😬
Let's have a look at the 5 best features of sass that can make a developer's life easy 😍
- Variables
- Nestings
- Mixin and includes
- Extend/Inheritance
- Modules
✨Variables
Variables are like containers that store information and can be used in other files. Things like font, color, font-size or any other CSS that is used again and again can be defined as a variable by using a $ sign.
Example:
SASS file
CSS output:
✨Nestings
SASS provides us a way to write our messy nested code in a very neat hierarchy just like our HTML.
Example:
SASS file
CSS output:
✨Mixin and include
If you feel like writing the same piece of CSS code everywhere then you should consider using the mixin and include feature. It helps in making group of CSS declarations and then use it where ever required by "@include" keyword.
Example:
SASS file
CSS output:
✨Extend/Inheritance
As the name suggests, this feature makes you able to extend your CSS classes. Just like inheritance, you can create a base class and extend it in multiple child classes.
Example:
SASS file
CSS output:
✨Modules
Sass has some built-in modules which can be imported by using "@use" keyword. You can also create custom modules but we will be only looking at the built-in ones.
Example:
SASS file
CSS output:
There are many other features of Sass but these were the 5 best ones I found. Let me know how do you guys use Sass in your projects and which feature is your favorite among all.
Stay tuned for more awesome content! 🌈💖
Thank you for reading !! 🥳✌
Follow me here 👉🏻 GitHub , LinkedIn , Youtube (If you like to watch VLOGS! 😋)