Pour commencer à écrire du code Sass, il est nécessaire de créer un fichier avec l’extension .scss (par exemple, feature.scss).

Examinons la syntaxe Sass à partir du code CSS suivant. Nous allons manipuler un bouton qui aura un effet au survol. Voici le code CSS correspondant :

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

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

Réécrivons ce même code en syntaxe Sass :

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

La différence réside dans le fait que l’on applique les styles d’un élément à l’intérieur de la première paire d’accolades {}. De plus, il n’est pas nécessaire de répéter le nom de la classe de l’élément. À la place, on utilise l’esperluette (&).

Remarque

En cas de questions ou d’incompréhension concernant certaines fonctionnalités de Sass, il est fortement recommandé de consulter la documentation Sass.

Compilation

Les navigateurs ne comprennent pas la syntaxe des préprocesseurs. Ils interprètent uniquement les syntaxes html, css et javascript. Comment cela fonctionne-t-il ? Il est nécessaire de compiler le fichier Sass en fichier CSS. Après la compilation, le résultat sera visible.

Nous disposons des options suivantes pour compiler Sass en CSS :

• Utilisation de l'extension Visual Studio Code - Live Sass Compiler ;
• Utilisation de l'application - Scout App.