SASS | Introduction

Sass is the short form of Syntactically Awesome Style Sheet. It is an upgrade to Cascading Style Sheets (CSS). Sass is a CSS pre-processor. It is fully compatible with every version of CSS. Sass reduces the repetition of CSS and therefore saves time. It was designed by Hampton Catlin and developed by Natalie Weizenbaum in 2006. Sass is free to download and use.

Pre-Requisites:

  • HTML
  • CSS

Working: A web browser does not understand the Sass code itself. That’s why you will require a Sass pre-processor to change Sass codes into simple standard CSS.
The above process is known as transpiling. So, you will be required to give the transpiler some Sass codes and then in return get some CSS codes back.

Note: Transpiling is the term used for taking a source code input of one language and translate it into an output of another language.

File Type: All Sass files must have the ".scss" file extension.



Comments: Sass supports the standard CSS comments " /* comment */ ", and along with that it also supports in-line comments "// comment".

Example:

filter_none

edit
close

play_arrow

link
brightness_4
code

/* Define fonts using variables */
$font_1: Algerian;
$font_2: Times New Roman;
  
.main {
    font: $font_1;
}

chevron_right


This would result in the following CSS Output:

/* Define fonts using variables */
.main {
	font: Algerian;
}

System Requirements and Installation of SASS:

  • Operating system: Sass is platform independent.
  • Browser support: Sass works in Edge/IE (from IE 8), Firefox, Chrome, Safari, Opera.
  • Programming language: Sass is based on Ruby.

For more info regarding Sass and installation visit the official Sass website https://sass-lang.com/

A basic example of Sass. Let us suppose a website has basically 3 fonts throughout. It will be a mess if it has to write the same font style again and again. Instead of writing font values, again and again, you can use the below Sass.
Example:

filter_none

edit
close

play_arrow

link
brightness_4
code

$font_1: Algerian;
$font_2: Times New Roman;
$font_3: Serif;
   
.main  {
    font: $font_1;
}
   
.menu-1 {
    font: $font_2;
}
   
.menu-2 {
    font: $font_3;
}

chevron_right


This would result in the following CSS Output:

.main {
	font: Algerian;
}

.menu-1 {
	font: Times New Roman;
}

.menu-2 {
	font: Serif;
}



My Personal Notes arrow_drop_up

Check out this Author's contributed articles.

If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to contribute@geeksforgeeks.org. See your article appearing on the GeeksforGeeks main page and help other Geeks.

Please Improve this article if you find anything incorrect by clicking on the "Improve Article" button below.