As you know “SASS(Syntactically Awesome StyleSheets) is an extension of CSS.” it offers various greater and dominant feature to the developers. For example features of variables, inheritance, inline rules imports, mixins, and nested CSS rules, etc., It makes developer’s job easy and more enjoyable, if you are front-end developer or full stack developer than you must need to learn and use SASS.
First of all, you need to understand the difference between .sass and .scss
.SCSS: (Sassy CSS) this is the newer syntax of SASS language which uses the brackets to format the code in blocks same like in CSS, and every valid CSS3 rule is valid in SCSS.
.SASS: uses indentation rather than brackets and it doesn’t adequately accommodate the CSS3 rule.
SASS can’t be run or executed directly by the browser. We must need to compile SASS into CSS first. There are various desktops, and CLI tools do this job done for you such as Koala, Compass.app, Grunt, Gulp, etc.
for more detail, please check the official documentation here
Here I am going to show some excellent features of SASS.
1. Variables
The concept of variable is similar like in others programming languages
We can reuse the value of the variable in different places.
Code
See the Pen evRJpR by Junaid Ahmed (@junaidfarid) on CodePen.dark
You can see the compiled CSS, follow the steps below
2. Mixins
Mixins are quite similar to the constructor function of programming languages. We can reuse the complete defined mixin with default values in many places. Mixins can accept parameters means we can pass the arguments. There are various types and uses of mixins for more detail you should check the official documentation of SASS
See the Pen Mixins by Junaid Ahmed (@junaidfarid) on CodePen.dark
3. Nesting
Nesting is an another excellent feature. It provides us a flexible way to organize and nest one selector inside another selector means to provide us a short way to reach the required selector and solve the conflict.
See the Pen yMXJmJ by Junaid Ahmed (@junaidfarid) on CodePen.dark
4. Extends OR Inheritance
It allows us to implement DRY(Don’t Repeat Yourself) principle. We can inherit the CSS properties of one selector to another selector, and also we can apply new CSS properties in the inherited selector. You should prefer @extends rather than mixin but when you want to pass some argument then use mixins.
See the Pen KWqgZW by Junaid Ahmed (@junaidfarid) on CodePen.dark
The above are the most important concept that we discussed. If you need any help about SASS or SASS installation or new feature please write in the comments below, I will give you precise information ASAP.
I recommend that you should check the official’s documentation SASS and explore the new and dominant features of SASS such as Placeholder, Functions, Operations etc.,