Open In App

SASS | Introduction

Improve
Improve
Improve
Like Article
Like
Save Article
Save
Share
Report issue
Report

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

 



Last Updated : 25 Jan, 2022
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads