Sirin J H

What is Sass and Why Should We Use It?

For those of you who don’t know what is Sass, the best starting point is to visit the official Sass webpage. Sass is an acronym for Syntactically Awesome StyleSheets, and is an extension of CSS that adds power and elegance to the basic language.

In the olden days, people used to write CSS by hand. This had a number of problems, namely:

• For performance (reducing HTTP requests) all the CSS needs to be in one file
• To speed things up (reduce bandwidth) CSS needs to be manually minified
• Keeping things DRY is very hard, if not impossible
• Browser compatibility causes duplication, both for vendor prefixes (a necessary evil) as well as providing common fallbacks

This is the first reason why need Sass: it helps you organize and modularize your stylesheets. It’s not variables, it’s not nesting. For me the key feature of Sass are partials and how it extends the CSS @import rule to allow it to import SCSS and Sass files. In practice, this means that you will be able to split your huge style.css file into several smaller files that will be easier to maintain, understand, and organize.

Difference between css and sass!

example.css

example.sass