formations / sass / utiliser-sass-avec-visual-studio-code

Débutant

cgoupil1970 | 21-08-2023

Utiliser Sass avec Visual Studio Code

Sass est un langage de feuilles de style en cascade (CSS) étendu qui permet aux développeurs web de créer des feuilles de style plus efficaces et maintenables en ajoutant des fonctionnalités telles que les variables, les mixins, les boucles et les conditions. En résumé, Sass facilite la gestion et la génération de CSS, améliorant ainsi la productivité des développeurs web.

Nous allons configurer Visual Studio Code pour pouvoir utiliser les feuilles de styles Sass.

Extension et configuration

Nous allons commencer par installer une extension permettant de compiler les feuilles de style Sass en feuilles de style Css en tant réel. Pour ce faire, on installe l'extension Live Sass Compiler.

Lorsque l'installation est effectuée, il faut alors la configurer dans les "settings" de Visual Studio Code. On accède aux "settings" à l'aide du raccourci clavier "CTRL+SHIFT+P" et ensuite on recherche "Open User Settings (JSON).

Ensuite dans le fichier JSON qui s'ouvre, on peut ajouter la configuration suivante :

// LIVE SASS COMPILER
"liveSassCompile.settings.formats": [
  {
     // Le format de sortie est compressé
     "format": "compressed",
     // L'extension du fichier compilé 
     "extensionName": ".min.css",
     // Le chemin de destination ou ~ représente la position du fichier sass
     "savePath": "~/../css"
   }
],
// La génération du fichier css ne génére pas de .css.map
"liveSassCompile.settings.generateMap": false,

Dans la configuration ci-dessus, on peut noter trois entrées dans le Json

Format : Les deux choix possibles sont "compressed" ou "expanded", "compressed" va générer une feuille de style minifiée.
ExtensionName : Il s'agit de l'extension du fichier qui sera appliqué lors de la compilation. Lorsqu'on utilise le format compressed, on peut utiliser la double extension de fichier ".min.css" ou min signifie que le fichier est compressé.
SavePath : Il s'agit de la déclaration de la destination du fichier de sortie. L'utilisation du ~ permet de spécifier une url relative à l'emplacement de la feuille de style Sass dans le projet.

En considérant l'arborescence suivante et la configuration vue précédemment, nous allons avoir la compilation de la feuille de style css qui se fera dans le dossier css et la source Sass sera bien dans le dossier scss.

Lorsque Visual Studio Code détecte une feuille de style scss dans le projet et parce que nous avons installé l'extension Live Sass Compiler, une fonctionnalité apparait en bas dans la barre de status représentée par Watch Sass. Il suffirat de cliquer pour mettre en place le "watcher".

Le watcher est un processus qui va détecter tout changement dans le feuille de style scss et automatiquement recompiler la feuille de style minifiée.