SASS installation in detail

SASS stands for Syntactically Awesome Style Sheet. It is a CSS preprocessor language. SASS provides many features like variable, operator, mixin etc just like other programming language does. It reduces the CSS development time.


The following are steps for the SASS set up in Linux

Step 1:
Install Ruby using apt package manager, rbenv, or rvm

Step 2:
Install sass using the following command

 sudo su -c "gem install sass"  

Step 3:
Following is a sample command for converting the SASS file to CSS file. For that first create a file with.SASS extension and add the SASS code.

 sass input.sass output.css  


Features of SASS


Variables are used to store some information, which can be used in our code where ever we want. SASS uses `$` symbol to declare the variable.

 $bodycolor: #333;  
   color: $bodycolor;     


SASS provides basic mathematical operators like +, -, *, / and %. Those are much useful in CSS styling process.

    width: 900px / 360px;    


A mixin is a block of CSS statements that can be used repeatedly in a program. This feature allows us to reduce the repeated CSS codes. Using `=` symbol we can create mixin and using `+` symbol we can add that mixin within our code.

    width: $wdvar;  


It is one of the important features in SASS. Using @extend keyword we can share a set of Css properties from one selector to another.

    color: #333;  
    @extend .classone;  
    border-color: green;  


SASS allows us to nest our CSS selectors in a way that follows the same visual hierarchy of our HTML.

     font-color: blue;  
       text-decoration: none; 

Leave your questions in comment section.

Sarav Author


  • Thamodaran

    (June 8, 2023 - 6:25 am)

    Good information. Nice to learn.

  • Francene Ketcherside

    (June 24, 2023 - 9:11 am)

    Thank you for sharing your notions on this weblog.

Leave a Reply

Your email address will not be published. Required fields are marked *