Hello Everyone welcome to my blog 🙏. I hope you are all safe and that this blog finds you in good health ❤️.
In this blog, we will be knowing about one of the preprocessors of CSS which is very fascinating and which is used in many of your projects i.e.SASS this blog guides you to get started and helps you to know the basic concepts of SASS.
To begin with, Let’s be very clear that, maybe it's SASS or any preprocessor ultimately these preprocessors get converted to CSS in the browser.
Then why do we have these preprocessors? CSS preprocessors make easy for developers to reduce repetitive tasks, create reusable code snippets, Easy to maintain larger stylesheets. Each preprocessor have their own syntax which eventually compile to CSS and render in client side browser. In simple words, Instead of conventional CSS, preprocessor will make your CSS code more flexible and which is a scripting language for CSS.
Now that makes you clear about what the preprocessor does. Let’s rush to our actual topic 🏃♂️🏃♂️🏃♂️.
Why SASS? Basics of SASS SASS vs SCSS
Basics of SASS
Variables
Just as we have variables in JS, SASS also have variables in it. Sometimes it is difficult to maintain the same colour codes or fonts either in a single file that has large stylesheets or across all pages. To declare a variable use $(dollar sign). Let’s understand it with a snippet
Check out here
This way you can actually use variables in SASS. If you are curious to know how it got compiled in CSS, Just click on view compiled in the SASS tab.
How can we use the same in other files, It is as simple as we do for constants in JS files. Just declare all your variables in a file with extension .sass and import that file in other files. for importing variables file, @use “variables” would work. This way we can achieve consistency across the project. We do have @import to import files but using it might cause some serious problems to more about it refer to this link Issues with import
Nesting
Everyone who is indeed worked on CSS knew how much it is tough to write CSS code for child elements that are wrapped inside the parent. But don’t worry SASS has given great flexibility with nesting. Let’s understand it with a snippet
This way you can actually use nesting in SASS for well-organized code. If you are curious to know how it got compiled in CSS, Just click on view compiled in the SASS tab.
Mixins
It is quite common for people who have some knowledge of any one of the frameworks and it is quite similar to that. For those who is unaware of mixins
Mixin is nothing but a piece of code where we can reuse across the file. It promotes Code reusability, reduces code duplication
To use Mixins in SASS, we require two decorators 1. @mixin mixin-name 2. @include mixin-name Let us understand it with a snippet
check out here
This way you can actually use mixins in SASS. If you are curious to know how it got compiled in CSS, Just click on view compiled in the SASS tab.
Apart from this, Mixin can also take arguments through which we can actually pass those values for dynamic design. Let’s see this by modifying the above snippet.
check out here
This way we can achieve code reusability & avoid code duplication.
These are some of the basics of SASS to get started and explore more about SASS. Apart from the above rules, there are many other rules like extend, forward, etc which make our styling task much easier.
please refer to SASS Official Documentation for more information.
SASS vs SCSS
Once you start exploring SASS, you get to know about SCSS. To be more precise both SASS and SCSS (Sassy CSS) are the same, the only difference is that SASS use indentation whereas SCSS uses blocks to separate styling which closely resembles CSS. Use appropriate file extension. SASS — filename.sass SCSS — filename.scss
I would prefer SCSS over SASS because it makes our CSS code more organized.
Here we go, That’s it folks for this blog. Hope everyone liked it. If you like it, give it a clap 👏 and share it with your friends.
For more exciting content on Frontend, Please do follow me 🎯.
Thanks a lot, Everyone 🙏.
Until Next time, Happy Learning ✍️
Abhishek Kovuri, UI developer