SASS — Syntactically Awesome StyleSheets
File Extension: filename.sass | filename.scss
Hello Everyone welcome to my blog 🙏. Hope you are all safe and this blog finds you in good health ❤️. Firstly, Wishing you everyone a happy and fantastic year ahead 🤝.
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 and 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 preprocessor does. Let’s rush to our actual topic 🏃♂️🏃♂️🏃♂️.
Why SASS?
Basics of SASS
SASS vs SCSS
Why SASS?
SASS provides great flexibility to code in CSS like Variables, Importing, Exporting, Nesting. It gives full compatibility of CSS syntax. Most Importantly you can organise larger stylesheets in a pretty good way.
To know more about Installing SASS in your project.
Please refer to this link SASS Installation
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
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
For everyone who is indeed worked on CSS knew that 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 to the people who have some knowledge in any one of the frameworks and it is quite similar to that. For them 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
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.
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 makes 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