Most of the beginner might get confused in these terms. All these terms are usually used for giving style to our site. This styling helps us design our application as per our need and requirement. CSS refers to Cascade Style Sheet whereas, SASS and SCSS are the preprocessors of CSS. The easiest way to determine the difference between them can be shown in the example below:
CSS:
-    .css extension is used
Example:

.content {
Border-color: #23jdh3;
}

.border {
Padding: 8px;
Border-color: 23jdh3;
}

SASS:

-    Preprocessor version of CSS
-    .sass extension used
-    Compile with traditional CSS which is easily understood by many of the browsers
Example:

$margin: 20px
$gray: #23jdh3

.content
Border-color: $gray

.border
Padding: $margin / 3
Border-color: $gray

As we can see that, semi-colons and curly braces are not used in SASS. Also, the next style is written in the new line.
SCSS:
-    A new version of SASS
-    Also known as Sassy CSS
-    Working mechanism is similar to that of SASS but consists of curly braces and semicolons
-    The next styling can be separated using semi-colon which decreases the number of lines while writing the code.

Example:

$margin: 20px;
$gray: #23jdh3;

.content {
Border-color: $gray;
}

.border {
Padding: $margin / 3; Border-color: $gray;
}

For more information, do visit

https://responsivedesign.is/articles/difference-between-sass-and-scss/
https://www.quora.com/What-is-the-difference-between-CSS-SASS-and-SCSS