SASS Tutorial

What is SASS?

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

Sass uses sass or scss files to write dynamic CSS code which are compiled to traditional stylesheets (CSS) using a Sass compiler. To compile Sass to CSS, we use Node.js. The previous version of Sass used Ruby instead of Node.js. 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 prefer using the command line as there is minimal installation.

To install Sass, install Node.js first. The previous versions of Sass used Ruby. Here is the step-by-step guide to install Sass using Node.js.

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. It's the same as in JavaScript, where we declare a variable at the top and use it later.

First, create a Sass file style.scss or style.sass in the CSS folder. Now open your Sass/SCSS file in a code editor and type. The only difference between Sass and SCSS files is that Sass doesn't need semicolons (;) 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 variables in Sass

To use the above variables in Sass/SCSS, use the following code after variable declaration. Variable declarations should be done at the top, and then we can call them.

    /*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 allows writing CSS selectors in a nested form. We can also use descendant/child selectors and pseudo-selectors in nesting. See the example below.

    /*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 files into smaller files and then treat each single file as a module and import all Sass or SCSS files into one.

To include Sass/SCSS files, use @use or @import (in previous versions) and then the file name (without extension). See the example below.

    /*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 are best used to write one CSS3 property, and Sass will write the same code with all vendor prefixes. For all such properties, we have to create a @mixin directive and then reuse mixins using @include. See the example below.

    /*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

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

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

SASS Functions

Sass functions are built-in or custom functions that perform operations and return values. Sass has many built-in functions for colors, math, strings, etc. You can also create custom functions.

Built-in Functions

Examples of built-in functions:

    /*style.scss*/
$color: #ff0000;
.darken-color {
    background: darken($color, 20%);
}
.lighten-color {
    background: lighten($color, 20%);
}

    /*style.css*/
.darken-color {
    background: #cc0000;
}
.lighten-color {
    background: #ff6666;
}

Custom Functions

To create a custom function, use @function and @return.

    /*style.scss*/
@function calculate-width($total, $columns) {
    @return ($total / $columns) * 1%;
}
.col-4 {
    width: calculate-width(100, 4);
}

    /*style.css*/
.col-4 {
    width: 25%;
}

Operators

Math operators like +, -, *, /, and % can be used in Sass to calculate values of properties, like percentages. See the example below.

To use math functions, first import math in Sass using @use 'sass:math'; at the 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 * 100%);
}

    /*style.css*/

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

Compile SASS to CSS

After completing the SASS or SCSS file, we have to compile Sass to CSS. This is the final step. Just remember, browsers understand only CSS files, not Sass or SCSS.

To compile Sass to CSS, open the terminal or CMD and follow these steps:

Compile Sass using terminal or command prompt

1. Open the terminal in macOS/Linux or type cmd in Run (Windows OS).
2. Change directory to the project's CSS folder using the cd command, e.g., cd desktop/sass/css .
3. Type sass style.scss style.css or sass style.sass style.css.
4. Link the compiled CSS file to HTML.
5. Run the HTML page in a web browser.

Compile Sass using VS Code

1. Open the 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 the compiled CSS file to the HTML page.

SASS Compilation Example

Suppose my project name is techaltum, stored on the desktop. The CSS files are inside the techaltum folder. We have to change directory to the CSS folder of techaltum on the desktop to run the Sass compiler.

techaltum/
    ├── index.html
    │
    ├── css/
    │   ├── reset.scss
    │   └── style.scss
    │
    ├── fonts/
    │   └── font.woff
    │    
    ├── img/
    │
    └── js/

After compilation, link the compiled CSS file to the index.html page.

Watch SASS

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

Stop watch

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