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

$padding:5px;
$margin: 2px;
$color:red;

.leftsidenavigation {
  background-color: $color;
  padding:$padding;
}

.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

$padding:5px
$margin:2px
$color:red

.leftsidenavigation 
  background-color: $color
  padding:$padding


.rightsidenavigation 
  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 |

Prev