Différence entre SASS et SCSS

Sass fournit deux syntaxes distinctes:

• SASS
• SCSS

Les deux sont similaires et font la même chose, mais écrit dans un style différent. Le SCSS est le dernier et considéré comme meilleur que Sass.
 
 

Différence clé entre SASS et SCSS

Sass est dérivé d’un autre préprocesseur appelé Haml. Il a été conçu et écrit par les développeurs Ruby. Les feuilles de style Sass utilisent donc Ruby comme une syntaxe sans accolades, sans points-virgules et avec une indentation stricte.
 
Vous trouverez ci-dessous un exemple du syntaxe SASS/SCSS. Le code déclare simplement deux variables, $color et $bg et les applique à l’élément HTML body.

$color: blue;
$bg: red;

body {
  color: $color;
  background-color: $bg;
}

Le même code avec la syntaxe SASS:

$color: blue
$bg: red

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

Les deux compilés vers le même code CSS:

body {
  color: blue;
  background-color: red;
}

Table de comparaison

Avantage du syntaxe Sass:

La syntaxe de Sass est totalement différente de CSS, mais elle est plus courte et plus facile à taper. Vous n’avez pas besoin de taper des points-virgules ou des accolades.
 
Il fournit également des normes de codage propres, car il suit la syntaxe indentée.
 

Avantage du syntaxe SCSS:

Il est totalement compatible avec CSS. Vous pouvez renommer un fichier CSS vers l’extension .scss et cela fonctionnera également. Puisqu’il suit la syntaxe de CSS, le rend très facile à apprendre et à utiliser.