Pour commencer à écrire du code sass, nous devons créer un fichier avec l'extension .scss. (par exemple, feature.scss).

Considérons la syntaxe sass sur le code css suivant. Nous allons manipuler le bouton qui aura un effet de survol. Nous écrivons le code css pour cela :

.button {
  font-size: 24px;
  color: green;
  background-color: rebeccapurple;
}

.button:hover {
  background-color: darkmagenta;
}

Réécrivons le même code en syntaxe sass :

.button {
  font-size: 24px;
  color: green;
  background-color: rebeccapurple;
  
  &:hover {
    background-color: darkmagenta;
  }
}

La différence est que nous utilisons des styles pour un élément à l'intérieur de la première paire de crochets {}. De plus, nous n'utilisons pas deux fois le nom de la classe de l'élément. Nous utilisons l'esperluette (&) à la place.

Remarque

En cas de questions ou de malentendus sur certaines fonctionnalités de sass, il est fortement recommandé d'utiliser la documentation sass.

Compilation

Les navigateurs ne comprennent pas la syntaxe du préprocesseur. Ils comprennent uniquement la syntaxe html, css et javascript. Alors, comment cela fonctionne-t-il ? Nous devons compiler le fichier sass en fichier css. Après la compilation, nous verrons le résultat.

Nous avons trois options pour compiler sass en css :

• Utiliser la plateforme interactive sass - sassmeister;
• Utiliser l'extension Visual Studio Code - Live Sass Compiler;
• Utiliser l'application - scout-app.