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 semicolon, block or multiple statements are enclosed in brackets.

Indented Syntax

File extension is sass

Instead of brackets, It uses indentation

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

Extension is SCSSExtension is SASS
Each line is end by semi colonSemi colon is not required, just include line break
Block of styles are enclosed in bracketsblock of styles are indentation by spaces
clean separation makes easy to readMissing indent space breaks the overall style code