What is SCSS? Differences Between .sass and .scss

To get to know SCSS, you must first learn about Sass. Most developers will find it a bit confused when it comes to choosing syntax to write CSS. There are some options when it comes to flavour of CSS.

Some of them are:

• SASS
• SCSS
• LESS
• Regular ol’ CSS

What is SCSS?

Sass has two syntaxes, scss and sass. SCSS is Sassy CSS and it is an extension of the syntax of CSS. It is the most commonly used between the two. Files using this syntax have the .scss extension.

Differences between .sass and .scss

Sass is the 2nd and older syntax. It is known as the indented syntax.

	SCSS	SASS
File Extension	.scss	.sass
Indicate nesting of selectors	brackets	indentation
Separate properties	semicolons	new lines

SCSS

ul{
	padding-left: 10px;
	li{
		color: blue;
	}
}

SASS

ul
	padding-left: 10px
	li
		color: blue

CSS

ul{
	padding-left: 10px;
}
ul li{
	color: blue;
}