SCSS/SASS and LESS are super set of CSS features with programmable .

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

Indented Syntax in SASS

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