The main difference between Sass and SCSS is the syntax.
Sass uses indentation to separate code blocks and newline characters to separate rules, while SCSS uses curly braces and semicolons. So, Sass has a more concise syntax, while SCSS is more similar to CSS.

here is an example of a Sass file:

    /* sass example */
    $color: #f00;
    .example
        color: $color
        .example2
            font-size: 20px
    

And here is an example of a SCSS file:

/* scss example */
$color: #f00;
.example {
  color: $color;
  .example2 {
    font-size: 20px;
  }
}

SCSS is a superset of CSS that adds power and elegance to the basic language.
It allows you to use variables, nested rules, mixins, inline imports, and more, all with a fully CSS-compatible syntax. SCSS files use the extension .scss.

/* scss example */
$color: #f00;
.example {
  color: $color;
  .example2 {
    font-size: 20px;
  }
}

/* css example */
.example {
  color: #f00;
}
.example .example2 {
  font-size: 20px;
}

Variables are a way to store information that can be reused throughout your stylesheet.
You can use variables to store colors, fonts, or any CSS value that you want to reuse.
Variables are declared with a $ and can be used anywhere in your stylesheet.

/* scss variables example */
$color: #f00;
$large-font: 20px;
$font-family: Arial;
.example {
  color: $color;
  font-size: $large-font;
  font-family: $font-family;
}

Nesting is a way to write CSS that is easier to read and maintain.
It allows you to nest one selector inside another. The child selector (&) is used to refer to the parent selector.

/* scss nested css example */
.example {
  color: #f00;
  .example2 {
    font-size: 20px;
  }
}

Mixins are a way to store blocks of CSS that can be reused throughout your stylesheet.
You can pass values into mixins to make them more flexible. Mixins are declared with `@mixin` and are used with `@include`.

/* mixins example */
@mixin large-text {
  font-size: 20px;
  font-family: Arial;
}
.example {
  @include large-text;
}

Functions are a way to store blocks of CSS that can be reused throughout your stylesheet.
You can pass values into functions to make them more flexible. Functions are declared with `@function` and are used with call().

/* functions example */
@function double($n) {
  @return $n * 2;
}
.example {
  width: double(5px);
}

Loops are a way to store blocks of CSS that can be reused throughout your stylesheet.
You can pass values into loops to make them more flexible. Loops are declared with `@for`, `@each`, and `@while` and are used with `@include`.

/* for loop example */
@for $i from 1 through 3 {
  .item-#{$i} {
    width: 2em * $i;
  }
}

/* while loop example */
$i: 6;
@while $i > 0 {
  .item-#{$i} {
    width: 2em * $i;
  }
  $i: $i - 2;
}

Functions are a way to store blocks of CSS that can be reused throughout your stylesheet.
You can pass values into functions to make them more flexible.
Functions are declared with @function and are used with call().

/* functions dynamic style example */
@function double($n) {
  @return $n * 2;
}

.example {
  width: double(5px);
}

.example2 {
  width: double(10px);
}

Control directives are a way to store blocks of CSS that can be reused throughout your stylesheet.
You can pass values into control directives to make them more flexible.
Control directives are declared with `@if`, `@for`, `@each`, and `@while` and are used with `@include`.

/* control directives example */
@if 1 + 1 == 2 {
  .example {
    color: #f00;
  }
} @else {
  .example {
    color: #00f;
  }
}

Extend is a way to store blocks of CSS that can be reused throughout your stylesheet.
You can pass values into extend to make them more flexible. Extend is declared with `@extend`.

/* extend example */
.message {
  border: 1px solid #ccc;
  padding: 10px;
  color: #333;
}
.success {
  @extend .message;
  border-color: green;
}
.error {
  @extend .message;
  border-color: red;
}

The @each directive is a way to store blocks of CSS that can be reused throughout your stylesheet.
You can pass values into the @each directive to make them more flexible. The @each directive is declared with @each and is used with @include.

/* each example */
$list: apple, orange, banana;
@each $fruit in $list {
  .#{$fruit} {
    background-image: url("/images/#{$fruit}.png");
  }
}

The @for directive is a way to store blocks of CSS that can be reused throughout your stylesheet.
You can pass values into the @for directive to make them more flexible.
The @for directive is declared with @for and is used with @include.

/* for loop based on list example */
$list: apple, orange, banana;
@for $i from 1 through length($list) {
  .item-#{nth($list, $i)} {
    background-image: url("/images/#{$fruit}.png");
  }
}

The @import directive is a way to store blocks of CSS that can be reused throughout your stylesheet.
You can pass values into the @import directive to make them more flexible.
The @import directive is declared with @import and is used with @include.

/* import example */
@import "example";

.example_1 {
  color: #f00;
}

The @media directive is a way to store blocks of CSS that can be reused throughout your stylesheet.
You can pass values into the @media directive to make them more flexible.
The @media directive is declared with @media and is used with @include.

/* media example */
@media screen and (max-width: 600px) {
  .example {
    color: #f00;
  }
}

The @at-root directive is a way to store blocks of CSS that can be reused throughout your stylesheet.
You can pass values into the @at-root directive to make them more flexible.
The @at-root directive is declared with @at-root and is used with @include.

/* at-root example */
.example {
  color: #f00;
  @at-root .example2 {
    color: #00f;
  }
}