SASS is Syntactically Awesome StyleSheets, in short a powerful CSS framework with superpowers.
Why do we need a framework for CSS?
For very large applications stylesheets can grow complex and tedious to maintain. So we have some features of SASS, that make this task of maintenance and overall build simpler with Preprocessors like variables, nesting, mixins, import etc.
Variables are used to store information which can be reused later throughout stylesheet.
$variable-name: parameter1, parameter2;
Nesting is done with CSS selectors and is hierarchy based, as we have in html file. Nesting makes the code more readable.
Mixins are group of CSS declarations that can be reused throughout the site. To create a mixin you use the
@mixin directive and give it a name. After creating your mixin, use it as a CSS declaration starting with
@include followed by the name of the mixin.
Import option that lets split CSS into smaller, more maintainable portions. But for each use of
@import in CSS it creates another HTTP request.
Extend/Inheritance is one of the most useful features of Sass. Using
@extend lets you share a set of CSS properties from one selector to another.
Operators like +, -, *, /, and % for doing math in your CSS is very helpful. Sass has a handful of standard math operators.