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

SCSSSASS
Extension is SCSSExtension is SASS
Each line is ended by a semicolonSemicolon is not required, just include line break
Block of styles are enclosed in bracketsblock of styles are indentation by spaces
clean separation makes it easy to readMissing indent space breaks the overall style code