SASS Tutorial

What is SASS?

SASS or Syntactically Awesome Style Sheets is a CSS Preprocessor used to extends CSS functionalities. SASS comes with great features like variables, functions, mixins, import etc.

Sass use sass or scss files to write dynamic css code 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. After compilation, 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. less code
2. variables
3. functions
4. import
5. easy to maintain
6. extend

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

Install sass on MacOS

Check sass is installed?

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 don'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

To use maths functions, first import math in sass using @use 'sass:math'; at top.

    /*style.scss*/
    @use 'sass:math';
.col-3{
width:  math.div(300px, 1200px) * 100%;
}
.col-6{
width: math.div(600px, 1200px) * 100%;
}

    /*style.scss*/
        
.col-3{
    width: calc(300px/1200px * 100%);
}
.col-6{
    width: calc(600px/1200px * 1000%);
}

    /*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 terminal or cmd and follow these step

Compile sass using terminal or command prompt

1. Open terminal in mac/linux or type cmd in run(Windows OS).
2. Change directory to project css folder using cd command, exp cd desktop/sass/css .
3. Type sass style.scss style.css or sass style.sass style.css.
4. Link compiled css file to html.
5. Run html page in a web browser

Compile sass using VS Code

1. Open terminal in VS Code
2. Choose command prompt in VS Code for windows os. (default is powershell)
3. type cd css to change directory.
4. type sass style.scss style.css to compile.
5. Link compiles css file to html page.

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/
    │   ├── reset.scss
    │   └── style.scss
    │
    ├── fonts/
    │   └── font.woff
    │    
    ├── img/
    │
    └── js/

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

Watch SASS

To compile scss to css, every time we need to change in SCSS/SASS file first and then compile. The process is bit tricky. To do this automatically, use sass -watch style.scss style.css or sass --watch style.sass style.css. This will help in development stage of web application. Now just save your sass file and watch flag will automatically convert it to css.

Stop watch

Once we are done, press Ctrl + c to terminate watch process in terminal.