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.

SASS is more popular than less, another css preprocessor.

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

    

SASS Import

With sass, we can split large sass or scss file into small files and then treat each single file as module and import all sass or scss files into one.

To include sass/scss file, use @use or @import (in previous versions) and then file name (without extension). See example


    /*reset.scss*/

*{ margin:0; box-sizing:border-box;}
ul{ list-style:none; padding:0}   
a{ text-decoration:none} 
img{ vertical-align:bottom}
iframe{ border:none}    

    /*style.scss*/

@use 'reset';
body{ font:14px sans-serif;}
.container{ width:1200px; margin:auto}

    /*style.css after compilation*/
    
*{ margin:0; box-sizing:border-box;}
ul{ list-style:none; padding:0}   
a{ text-decoration:none} 
img{ vertical-align:bottom}
iframe{ border:none}
.container{ width:1200px; margin:auto}    

Mixins

Sass mixins is best used to write one css3 property and sass will write same code with all vendor prefixes. For all such properties, we have to create one @mixin directive and then reuse mixins using @include. See example


    /*style.scss*/
@mixin transform($property){
    -webkit-transform: $property;
    -ms-transform: $property;
    transform: $property;
}

.rotate30{ @include transform(rotate(30deg)); }
.rotate60{ @include transform(rotate(60deg)); }
    /*style.css*/

.rotate30{
    -webkit-transform:rotate(30deg);
    -ms-transform:rotate(30deg);
    transform:rotate(30deg);
} 

.rotate60{
    -webkit-transform:rotate(60deg);
    -ms-transform:rotate(60deg);
    transform:rotate(60deg);
}    

Extend/Inheritance

extend rule is used to reuse a set of css properties again and again. %properties is used to create rule and use the, use @extend. See example

    /*style.scss*/

%alert{
    border:1px solid #333;
    padding:10px; 
    margin:10px;
    color:#fff;
}    

.alert-danger{
    @extend %alert;
    background:#f66;
}

.alert-success{
    @extend %alert;
    background:#6f6;
}

.alert-warning{
    @extend %alert;
    background:#fb9f00;
}
    /*style.css*/

.alert-danger{
    border:1px solid #333;
    padding:10px; 
    margin:10px;
    background:#f66;
    color:#fff;   
}
.alert-success{
    border:1px solid #333;
    padding:10px; 
    margin:10px;
    background:#6f6;
    color:#fff;   
}
.alert-warning{
    border:1px solid #333;
    padding:10px; 
    margin:10px;
    background:#fb9f00;
    color:#fff;   
}

Operators

Math Operators like +, -, *, / and % can be used in sass to calculate values of properties, like percentage. See example

    /*style.scss*/

.col-3{
width: 300px/1200px * 100%;
}
.col-6{
width: 600px/1200px * 100%;
}
    /*style.css*/

.col-3{
width:25%;    
}
.col-6{
width:50%;    
}

Compile SASS to CSS

After completing SASS or SCSS file, we have to compile sass to css. This is the Final Step. Just remember, browser understand only css file, not sass or scss.

To compile sass to css, open npm in terminal or cmd and follw these steps

  1. Type "npm" in terminal or cmd.
  2. Change directory to project css folder.
  3. Type sass style.scss style.css or sass style.sass style.css.
  4. Link compiled css file to html.
  5. Run html page i browser

SASS Compilation Example

Suppose my project name is techaltum, stored in desktop. The css file is inside techaltum folder. We have to change directory to css of techaltum in desktop to run sass compiler.


techaltum/
    ├── index.html
    │
    ├── css/
    │   └── style.scss 
    │
    ├── fonts/
    │   └── font.woff
    │    
    └── img/
cd desktop/css
sass style.scss style.css

After compilation, link compiled css file to index.html page.


Watch SASS

To scss to css every time we change in SCSS/SASS file, use sass -watch style.scss style.css or sass --watch style.sass style.css. This will help in development stage of web application. Once we are done, press Ctrl + c to terminate watch process in terminal.

sass --watch style.scss style.css

To exit watch process, press ctrl + c.