sass SCSS vs Sass Main Differences

Help us to keep this website almost Ad Free! It takes only 10 seconds of your time:
> Step 1: Go view our video on YouTube: EF Core Bulk Insert
> Step 2: And Like the video. BONUS: You can also share it!

Example

Although people often say Sass as the name of this CSS-preprocessor, they often mean the SCSS-syntax. Sass uses the .sass file extension, while SCSS-Sass uses the .scss extension. They are both referred to as "Sass".

Speaking generally, the SCSS-syntax is more commonly used. SCSS looks like regular CSS with more capabilities, whereas Sass looks quite different to regular CSS. Both syntaxes have the same abilities.

Syntax

The main differences are that Sass doesn't use curly brackets or semicolons, where SCSS does. Sass is also whitespace-sensitive, meaning you have to indent correctly. In SCSS, you can format and indent your rules as you please.

SCSS:

// nesting in SCSS
.parent {
  margin-top: 1rem;

  .child {
    float: left;
    background: blue;
  }
}

SASS:

// nesting in Sass
.parent
  margin-top: 1rem

  .child
    float: left
    background: blue

After compilation, both will produce the same following CSS:

.parent {
  margin-top: 1rem;
}
.parent .child {
  float: left;
  background: blue;
}


Got any sass Question?