SASS is often preferred as critically important stylesheet for styling webpage

SASS is a style sheet language that is interpreted into Cascading Style Sheets (CSS). SASS Script is the scripting language itself. SASS offers what its name defines, “Syntactically Awesome Stylesheets”. It was designed by Hampton Catlin and developed by Natalie Weizenbaum. SASS is compatible with all versions of CSS and can be used with any CSS library. SASS is used just as syntactic sugar to CSS and translates its script to CSS at compile time. SASS defines two types of syntax,

• Indexed Syntax or a key syntax(SASS)
• CSS Styling Syntax or rules definition syntax(SCSS)

Indexed Syntax or a key syntax(SASS)

Indexed Syntax or a key syntax uses proper indentation to separate out its rules and newline characters to put line among them. This file is created with extension(.sass).

CSS Styling Syntax or rules definition syntax(SCSS)

CSS Styling Syntax or rules definition syntax defines the a set of CSS styling codes and proper values associated with them. It uses a newline character to put line in block of code and curly braces to separate out the blocks of code. This file is created with extension(.scss).

Numerous datatypes by SASS

SASS supports four kind of datatypes,

• Numbers, it can include units as well
• Strings, it can be with and without quotes
• Colors, it can have a name or names of colors
• Boolean

Numerous features by SASS

As SASS functions as scripting language, it provides following features,

Variables

In such conditions we want the information to be reused on the web page for styling, we use the variables for storing them. In SASS the variables are created by a $ symbol

$errorMessage : red
$errorFont : Helvetica, sans-serif

body
	font: 50% $errorFont
	color: $errorMessage

Here above is code written in SASS

$errorMessage : red;
$errorFont : Helvetica, sans-serif;

body {
	font: 50% $errorFont;
	color: $errorMessage;
}

And now above is written in SCSS

Nesting

As styling is done on HTML components, we know that HTML components and tags follows a particular hierarchy with a clear nesting of blocks. On the other hand CSS, which is providing the styling to it, does not follow this hierarchy. SASS serves with a nested CSS selectors that provides same visual hierarchy as of HTML language.

In SASS we can generate a hierarchy to set rows and columns of a table as,

table
	tr
		font: 50% $headingFont
		color: $headingMessage

	td
		font: 50% $cellFont
		color: $cellMessage

While in CSS we are required to write the same as,

table tr {
	font: 50% $headingFont;
	color: $headingMessage;
}
		
table td {
	font: 50% $cellFont;
	color: $cellMessage;
}

So on reviewing both the code blocks, the SASS is following a proper hierarchy.

So now by following these features provided by SASS we can style our code in a proper formatted way.

Happy Blogging !!!