SASS - Syntax

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