SASS is often preferred as critically important stylesheet for styling webpage


color-1c4aab2bSASS 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 !!!

Advertisements

About Harsh Sharma Khandal

Harsh is a Sr. Software Consultant at Knoldus Software LLP with 4 year of experience. He is a fan of programming standards and conventions. He has good knowledge of Scala, Java, 3D Modeling and 3D animation. His current passions include utilizing the power of Scala, Akka and Play to make reactive applications. He is a technologist and is never too far away from the keyboard. He believes in standard coding practices. His focus always remains on practical work. He has Master's in Computer Applications from Rajasthan Technical University, Kota. His hobbies include reading books and writing the code in multiple ways to find the best way it can be represented.
This entry was posted in HTML, Scala and tagged , , , , , , , , . Bookmark the permalink.

One Response to SASS is often preferred as critically important stylesheet for styling webpage

  1. Pingback: Styling Unordered Lists - techmagus™

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s