SASS Syntax

This tutorial covers sass and scss synta in SASS language..

SASS language syntax

SASS script can be specified in two types of syntaxes - SCSS syntax - Indented Syntax

SCSS Syntax

scss is a super set of css, every style in css is valid in scss. file extension is scss It uses brackets for blocks or functions, semi colon for end of line

$margin: 2px;

.leftsidenavigation {
  background-color: $color;

.rightsidenavigation {
  margin: $margin * 2; 

end of line contains semicoloon, block or multiple statements are enclosed in brackets.

Indented Syntax

File extension is sass

Instead of brackets, It uses indenteation

SASS example


  background-color: $color

  margin: $margin * 2

When compiled SASS/SCSS files, generated CSS output is

.leftsidenavigation {
  background-color: red;
  padding: 5px;

.rightsidenavigation {
  margin: 4px;

Difference between SASS and SCSS

| SCSS | SASS | | ————————————– |:————-:| | Extension is SCSS |Extension is SASS | | Each line is end by semi colon | Semi colon is not required, just include line break | | Block of styles are enclosed in brackets| block of styles are indententation by spaces | | clean separation makes easy to read | Missing indent space breaks the overal style code |