SASS language syntax

SASS script can be specified in two types of syntax

  • SCSS syntax
  • Indented Syntax

SCSS Syntax

scss is a superset of CSS, every style in CSS is valid in scss. the file extension is scss It uses brackets for blocks or functions, semicolons for end of line

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

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

.rightsidenavigation {
  margin: $margin * 2; 
}

end of the line contains a semicolon, block, or multiple statements enclosed in brackets.

Indented Syntax in SASS

The file extension is sass

Instead of brackets, It uses indentation

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 ended by a semicolon Semicolon is not required, just include line break
Block of styles are enclosed in brackets block of styles are indentation by spaces
clean separation makes it easy to read Missing indent space breaks the overall style code