Sass Sass vs Scss

Sass and scss difference

Sass provides two syntaxes:

Sass
Scss

Sass Syntax

Sass is the older syntax (indented syntax) as the block is distinguished by intendentation intead of {} to indicate nesting of selectors, newlines instead of ; (semicolons) for CSS properties seperation and = for value assignment. Sass syntax uses .sass files extension.

Scss Syntax

SCSS (Sassy CSS) is the new syntax and the extension of the CSS syntax. SCSS syntax allows valid CSS piece of code is also valid for SCSS. Just like CSS, SCSS distinguishes selectors block with {} (curly brackets) and properies with ; (semocolon) and : (colon) for value assignment. SCSS syntax uses .scss files extension.

Sass Example

Following is the code in Sass syntax:


body
  background-color = #000
  color = #fff
  font-size = 12px
  h1
    font-size = 16px
  div
    background-color = red
    color = green
	span
	  color = yellow

A little discrepency in the indentation may lead to unexpected result in Sass syntax

Scss Example

Follwoign is the corresponding code in Scss syntax of above code:


body{
	background-color: #000;
	color: #fff;
	font-size: 12px;
	h1{
		font-size: 16px;
	}
	div{
		background-color: red;
		color: green;
		span{
			color: yellow;
		}
	}
}

CSS Output

Both of the above Sass and Scss codes will generate the following output:


body
{
	background-color: #000;
	color: #fff;
	font-size: 12px;
}
body h1
{
	font-size: 16px;
}
body div
{
	background-color: red;
	color: green;
}
body div span
{
	color: yellow;
}

Sass vs Scss | Sass