What is the difference between SCSS and SASS?

In this blog, I will show you What is the difference between SCSS and SASS ?

Sass provides two distinct syntax:

  • Sass
  • SCSS

Both are similar and do the same thing, but are written in different style. SCSS is the latest and considered better than Sass.

Difference between SASS and SCSS

SASS (Syntactically Awesome Style Sheets) is a pre-processor scripting language that will be compiled or interpreted into CSS. SassScript itself is a scripting language whereas SCSS is the core syntax for SASS which builds on top of the existing CSS syntax.

  1. SASS stands for Syntactically Awesome Style Sheets and The full form of SCSS is Sassy CSS.
  2. SASS files have a .sass extension. SCSS files have the .scss extension.
  3. Let us list down the main difference between SASS and SCSS.
  4. SASS is used when we need basic syntax, SCSS does not require code syntax.
  5. SASS follows strict indentation, SCSS has no strict indentation.
  6. SASS has a loose syntax with whitespace and no semicolons, more resembling the SCSS CSS style and mandates the use of semicolons and braces.
  7. It uses SassScript. and It uses CSS.
  8. SASS has a greater developer community and support than SCSS.

SCSS Example:

/* .scss file */
$color: black;
$bgcolor: blue;
$fontsize: 3em;

/* Use the variables */
body {
background-color: $bgcolor;
color: $color;
font-size: $fontsize;

Output CSS:

body {
  background-color: blue;
  color: black;
  font-size: 3em;
/* now this can apply resulting html file */

SASS Example:

/* SASS */

$primary-color: black
$primary-bg: red
$font-size: 2em

color: $primary-color
background: $primary-bg
font-size: $font-size

Output CSS:

/* CSS */
body {
  color: green;
  background: red;
  font-size: 2em;

Hope this blog is helpful for you ,Thanks for reading this blog.