Sass is basically an extension of CSS3 and it adds a whole new dimension to CSS. It can add selector inheritance, mixins, variables and nested rules. All of this translates to standard, well formatted CSS using a web framework plugin or command line tool.
The Two Syntaxes of Saas
Sass basically has two syntaxes. SCSS is the main new syntax and is a superset of the syntax of CSS3. What this means is that every CSS3 stylesheet that is valid will also be a valid SCSS. The extension used by SCSS files is .scss. The older syntax was known as just Sass or independent syntax. This syntax was created for people who like conciseness rather than similarity to CSS. Rather than semicolons and brackets, it makes use of line indentation for specifying blocks. A lot of people continue to support it though it isn’t the primary one any longer. The extension used for this syntax is .sass.
Sass is very helpful for website design since it can support math operations, variables and much more helping you if you want to do math with the text sizes, width and height. It can also help if you want to use one color throughout the website.
It also helps you avoid repetition by nesting the selectors within each other as with properties.
With Sass you can have a single selector inheriting the styles of other while avoiding any duplication of the CSS properties.
Mixins will allow you to utilize the entire CSS, selectors or properties again.