What is SASS?

SASS is a CSS Proprocessor which compile sass to css. SASS comes with features like variables, functions, mixins, import etc.

Sass use sass/scss files to write dynamic stylesheet which are compiled to traditional stylesheet (css) using sass compiler. To compile sass to css, we are using Node JS. The previous version of sass use ruby instead of nodejs. we have to link the compiled css file in our html page.

Why to use sass?

  1. Sass files are smaller than css
  2. use of variables
  3. use of functions
  4. can merge multiple sass files to one css
  5. easy to maintain
sass
Sass to css

SASS Installation

There are two ways to use sass, application or Command Line. I'll prefer using command line as there is minimum installation.

To install sass, install node js first. The previous versions of sass were using ruby. Here is the step by step guide to install sass using nodejs.

Install sass using nodejs

npm install -g sass

Check sass is installed?

1.24.0 compiled with dart2js 2.7.0

sass --version

Once sass is successfully installed, we can use sass compiler using npm. But before that, lets learn sass first.


Sass variables

sass variables are used to store css values in variables. Its same like javascript, that we declare a variable at top, and use later.

First create a sass file style.scss or style.sass in css folder. Now open your sass/scss file in code editor and type. The only difference between sass and scss file is that sass dont't need semicolon (;) and declaration blocks, i.e {}.

Variable in scss


    $bgcolor:#eee;
    $fontcolor:#333;
    $fontsize:14px;
    $fontfamily:'helvetica neue', helvetica, sans-serif;
    

Variable in sass


    $bgcolor:#eee
    $fontcolor:#333
    $fontsize:14px
    $fontfamily:'helvetica neue', helvetica, sans-serif    
    

How to use variable in sass

To use above variables in sass/scss, use following code after variable declaration. Variable declaration should be done at top and then we can call.

    /*in scss*/
$bgcolor:#eee;
$fontcolor:#333;
$fontsize:14px;
$fontfamily:'helvetica neue', helvetica, sans-serif;    

.panel{ 
    background:$bgcolor; 
    color:$fontcolor; 
    font:$fontsize $fontfamily;
}
    
    /*in sass*/
$bgcolor:#eee;
$fontcolor:#333;
$fontsize:14px;
$fontfamily:'helvetica neue', helvetica, sans-serif;    
    
.panel 
    background:$bgcolor 
    color:$fontcolor 
    font:$fontsize $fontfamily

    
    /*in css after compilation*/
    
.panel{
    background:#eee; 
    color:#333;
    font:14px 'helvetica neue', helvetica, sans-serif;
}

    

Nesting

Sass Nesting can write css selectors in nested form. We can also use descendant/child selectors and pseudo selectors in nesting. See example

    /*in scss*/
$bg:#333;
$color:#fff;
$ib:inline-block; 
   
.nav{ 
    background:$bg; 
    ul{
       list-style:none;
       padding:0;
        li{
           display:$ib;
            a{
                display:$ib;
                color:#fff;
            }
        }
    }
}
    
    /*in css after compilation*/
    
.nav{
    background:#333; 
}
.nav ul{
    list-style:none;
    padding:0; 
}
.nav ul li{
    display:inline-block;
}    
.nav ul li a{
    display:inline-block;
    color:#fff;
}