Skip to content
Related Articles

Related Articles

SASS | Introduction

View Discussion
Improve Article
Save Article
  • Difficulty Level : Basic
  • Last Updated : 25 Jan, 2022
View Discussion
Improve Article
Save Article

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 translating 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: 
 

css




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


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: We can’t use SASS natively in the browsers. To use SASS:
  1. Install tools like sass.js on the client side.
  2. Use transpiler like node-sass, dart-sass to transpile .scss files into .css file.
  • 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: 
 

css




$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;
}


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
Recommended Articles
Page :

Start Your Coding Journey Now!