SASS means Syntactically Awesome Style sheets. It is a CSS preprocessor which is used to reduce repetition with CSS and save time. It adds power and elegance to the basic language and facilitates you to add variables, nested rules, mixins, inline imports, inheritance and more, all with fully CSS-compatible syntax.

SASS was developed by Natalie Weizenbaum and was designed by Hampton Catlin. So, Hampton Catlin is credited as the designer of SASS, and he is also known as the father of SASS.

Following are some important reasons behind the popularity of SASS.

• You can write codes easily and efficiently, and they are easy to maintain.
• It is a pre-processing language which provides its syntax for CSS.
• It is a superset of CSS which contains all the features of CSS and is an open source pre-processor, coded in Ruby.
• It is more stable and powerful CSS extension and style documents more clearly and structurally.
• It facilitates reusability methods, logic statements and some of the built-in functions like color manipulation, mathematics, and parameter lists item.

We can use SASS in three different ways:

• As a command line tool.
• As a standalone Ruby module.
• As a plug-in for any Rack-enabled framework.

• It is more stable, powerful and fully compatible to CSS3.
• It is time-saving because it facilitates you to write CSS in less code.
• It uses its syntax.
• It is based on the JavaScript and superset of CSS.
• It is an Open source pre-processor that interprets into CSS.
• It contains various functions for manipulating colors and other values.
• It has advanced control directives for libraries.
• It provides well formatted, customizable output.

Following data types are supported by the Sass Script:

• Boolean (true or false)
• Number (1, 5, 13, 10px)
• Nulls
• Colors (red, #FF0000)
• Text String, without quote ("foo", "bar")
• List of values that are separated by commas or space (2.0em, Verdana, Arial, Helvetica)
• Maps from one value to another value (key 1: value 1, key 2: value 2)
• Function reference.

SASS always supports all other types of CSS property value such as Unicode range, special character, and unquoted string.

A variable begins with a dollar ($) sign, and the assignment of the variable is completed with a semicolon (;) sign.

The main differences between SCSS and Sass are as follow:

Sass is like a CSS pre-processor. It has the extension of CSS3. Sass is derived from another preprocessor known as Haml.

Sass contains two types of syntax:

• "SCSS" is the first syntax and it uses the extension of .scss.
• Indented syntax or "Sass" is the other syntax and it uses the extension of .sass

You can covert the valid CSS document into Sass by simply change the extension from .CSS to .SCSS. It is fully CSS compatible. SCSS provides the CSS friendly syntax to closing the gap between Sass and CSS. SCSS is called Sassy CSS.

• It facilitates you to extend the CSS import rule. To do this you need to enable import of Sass and SCSS files.
• It can merge the all the imported files into a single outputted CSS file.
• It is used to virtually match and mix any file.
• It needs a filename to import function.
• It provides document style presentation better than flat CSS.
• It facilitates you to keep your responsive design project more organized.

• Time saving.
• More efficient and quicker.
• Compatible with all versions of CSS.
• You can use nested syntax and useful functions such as color manipulation, mathematics and other values.
• Write clean CSS in programming construct
• It is the super set of the CSS and using nested and others value.