sass SCSS vs Sass Main Differences


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;
}