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.

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


	padding-left: 10px;
		color: blue;


	padding-left: 10px
		color: blue


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

Leave a Comment

Your email address will not be published. Required fields are marked *

We care about your privacy and data security. Google serves cookies to analyse traffic and show ads on this site. By using this site you agree to these cookies being set. more information

The cookie settings on this website are set to "allow cookies" to give you the best browsing experience possible. If you continue to use this website without changing your cookie settings or you click "Accept" below then you are consenting to this.