What is the difference between SCSS and SASS ?

SASS (Syntactically Awesome Style Sheets) is a pre-processor scripting language that will be compiled or interpreted into CSS. SassScript is itself a scripting language whereas SCSS is the main syntax for the SASS which builds on top of the existing CSS syntax. It makes use of semicolons and brackets like CSS (Cascaded Style Sheets).
SASS and SCSS can import each other. Sass actually makes CSS more powerful with math and variable support. 
Let’s list down the main difference between SASS and SCSS. 

• SASS is used when we need an original syntax, code syntax is not required for SCSS.
• SASS follows strict indentation, SCSS has no strict indentation.
• SASS has a loose syntax with white space and no semicolons, the SCSS resembles more to CSS style and use of semicolons and braces are mandatory.
• SASS file extension is .sass and SCSS file extension is .scss.
• SASS has more developer community and support than SCSS.
• SASS supports SassDoc to add documentation whereas SCSS allows inline documentation.
• SASS can’t be used as CSS and vice-versa whereas a valid CSS code is also a valid SCSS code.
• SASS is hard to add to existing CSS projects whereas SCSS can be added easily to an existing CSS project just by adding new code.

SCSS Example:

SCSS

/* .scss file */
$bgcolor: blue;
$textcolor: red;
$fontsize: 25px;

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

Output CSS:

body {
  background-color: blue;
  color: red;
  font-size: 25px;
}
/* now this can apply resulting html file */

SASS Example:

SASS

/* SASS */

$primary-color: green
$primary-bg: red

body
  color: $primary-color
  background: $primary-bg

Output CSS:

/* CSS */
body {
  color: green;
  background: red;
}

CSS is the foundation of webpages, is used for webpage development by styling websites and web apps.You can learn CSS from the ground up by following this CSS Tutorial and CSS Examples.