What is Sass?
Whether you are an experienced developer or a newbie who is just getting started in the technology field, you must have heard about Sass. In short, Sass (Syntactically Awesome Style Sheets) is an extension of CSS that adds special features to the regular CSS. Sass is a Preprocessor of CSS. A CSS Preprocessor is a scripting language that allows coders to code in one language and later compile it to CSS.
Before diving into Sass, it is advised to properly soak in the core concepts of CSS because Sass is similar to CSS in a lot of ways.
Why Sass?
We already have CSS to style our websites, so why should we bother using Sass or even spend time learning it? Well, the perks of using Sass is highly rewarding. Some advantages of using Sass are:
-> Neatly organized: Code written in Sass is really easy to read and understand. It comes in handy especially when building large projects.
-> Easy Syntax: If you are good with CSS, learning Sass will be a piece of cake for you. Picking up Sass on top of CSS is easy.
-> Reusable code: Using Sass, a particular piece of code can be reused multiple times. Reusability is always a plus point because it saves time and the frequency of error declines. This cannot be done using CSS.
-> Stability: Sass is a mature language that is frequently updated. So, new features are introduced from time to time and stability ensures that sass won’t have any issues.
How does Sass work?
Sass being a preprocessor language takes input and converts it to output which finally is used as an input in CSS. This extra step is required because browsers cannot read Sass code, they only understand CSS.
Features of Sass:
-> Open source: Sass is open source. It means that Sass is freely available and the source code is completely visible to everyone.
-> Variables: Repetition is something developers hate with every cell on their body. Variables can be used to store data and later these variables can be used whenever necessary.
-> Mixins: Mixins are a collection of variables. The advantage it carries is that we can use mixins instead of remembering all the variable names. For instance, we can make a mixin if most of the pages of a website use the same fonts, colors and borders.
-> Extend/Inheritance: This feature is really useful as it makes code reusable and follows the DRY (Do not repeat yourself) principle. The style of previously made selectors can be inherited by other selectors. Assume, we have a page that was built previously. Now we want to build a new page that looks the same as the previous page, but the color of the footer part is something we wish to change. Instead of rewriting everything, we can inherit the properties using mixin.
-> Functions: Functions are reusable pieces of code that can be used by calling it. In Sass, we can make functions and in the time of need, we can call them. Few built-in functions like percentage(), floor() and round() are also already available in Sass.
-> Nesting: Nesting can get tricky if not used properly. It can decrease a huge chunk of code and make code more readable but has to be executed carefully.
-> Operators: No matter what the language is, arithmetic operations can be useful. Converting pixels value into percentages and doing basic math operations like addition, subtraction, division and multiplication are always convenient.
To summarize, Sass can be considered a tool that gives CSS the power of a programming language.
Where to start learning Sass?
Just like other languages, the best place to start learning Sass is the official documentation. The link to its official website is:
https://sass-lang.com/documentation/
Sass Alternatives:
There are some alternatives of Sass that you can explore :
– Stylus
– styled-components
– PostCSS
– Bootstrap
– Less
– node-sass
– Animate.css
– Autoprefixer
Differences between Sass and CSS:
| Sass | CSS |
|---|---|
| 1. Sass is a preprocessor of CSS | 1. CSS describes how the HTML element will appear. |
| 2. Sass is based on SassScript. | 2. CSS works after unification with HTML. |
| 3. It uses indentation for a new line instead of a semicolon. | 3. It uses semicolons in the declaration block. |
| 4. It allows variables that can be reused. | 4. There is no concept of variable reusability in CSS. |
| 5. Nesting of CSS selectors in a certain hierarchy is present in Sass. | 5. Nesting of CSS selectors often leads to conflicts. |
| 6. Sass was made to add features to CSS. | 6. CSS was made to style HTML elements. |
Author: Anurag Pokhrel
