What is SCSS? Differences Between .sass and .scss

To become familiar with SCSS, you must first become familiar with Sass. When it comes to selecting the appropriate syntax to write CSS, the vast majority of developers will experience some level of confusion. 

When it comes to the flavor of CSS, you have a few different options.

Some of them are:

• SASS
• SCSS
• LESS
• Regular ol’ CSS

What is SCSS?

SCSS, or Sassy CSS, is a style sheet language that is a superset of CSS, meaning it is an extension of CSS and is fully compatible with the existing CSS syntax. SCSS is a Sass pre-processor designed to extend the functionality of CSS and enable developers to write more dynamic, powerful stylesheets in a more organized manner.

Essentially, SCSS is a programming language used to create/maintain stylesheets. It uses a syntax that looks more like a programming language but is actually just a powerful way of writing CSS. It enables developers to write easier-to-read, maintain, and debug stylesheets. SCSS is a powerful tool for developers who need to create complex stylesheets quickly.

Differences Between SCSS and CSS

• Variables in SCSS allow developers to reuse and maintain code more easily. Additionally, SCSS allows developers to nest styles, which can make it much easier to maintain and manage complex stylesheets.
• A mixin is a set of styles that can be reused throughout a stylesheet. This allows developers to create more efficient and reusable stylesheets.

Functions are similar to mixins, except they allow developers to use programming-like operations within their stylesheets.

Differences Between .sass and .scss

The main difference is the syntax. Sass is a more command-line-oriented syntax and is not compatible with the existing CSS syntax. SCSS, on the other hand, is a superset of CSS and is fully compatible with the existing CSS syntax, which means it can be used to extend the functionality of traditional CSS.

	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;
}