DIFFERENCE BETWEEN CSS, SCSS & SASS

The syntax of SCSS or SASS is quicker to write then CSS. With nesting the syntax is better to read and easier to change code using variables.

Sample code CSS:


#header {
margin: 0;
border: 1px solid red;
}

#header p {
font-size: 12px;
font-weight: bold;
color: red;
}

#header a {
text-decoration: none;
}

Sample code SCSS:


$colorRed: red;
#header {
margin: 0;
border: 1px solid $colorRed;

p {
color: $colorRed;
font: {
size: 12px;
weight: bold;
}
}

a {
text-decoration: none;
}
}

Sample code SASS:


$colorRed: red
#header
margin: 0
border: 1px solid $colorRed

p
color: $colorRed
font:
size: 12px
weight: bold

a
text-decoration: none




If you observe the above code the main diffrence in SCSS & SASS is we Use ; to seperate declarations in SCSS but in SASS must be in diffrent lines and no closing and opening brackets.