Cet article vous présente tout ce qu’il faut savoir afin d’utiliser le pré-processeur SASS pour vos projets web sur le logiciel Visual Studio Code.
Installation de l’extension Sass
En utilisant le gestionnaire d’extensions, recherchez et installez l’extension Live Sass Compiler.
Configuration du projet
Il est possible, si vous le souhaitez, de personnaliser les paramètres de compilation Sass pour votre projet.
Créez un dossier de travail (un dossier racine).
Lancez Visual Studio Code.
Ajoutez votre dossier de travail au Workspace : Fichier / Ajouter un dossier à l’espace de travail….
Enregistrez votre espace de travail (Workspace) : Fichier / Enregistrer l’espace de travail sous….
Si vous enregistrez le fichier .code-workspace dans le dossier du projet, vous pourrez déplacer votre dossier racine sans impact sur les paramètres du Workspace.
Modifiez les paramètres du Workspace comme dans l’exemple suivant en ajustant à votre convenance les options et en particulier l’option liveSassCompile.settings.formats
qui doit être adaptée à votre projet (cf. étape suivante). Le code proposé ici va générer plus de fichiers que nécessaires, vous ne devez pas l’utiliser tel quel.
{ "folders": [ { "path": "." } ], "settings": { "liveSassCompile.settings.formats":[ { "format": "expanded", "extensionName": ".css", "savePath": "/dev/css" }, { "format": "compressed", "extensionName": ".min.css", "savePath": "/dist/css/" }, { "format": "expanded", "extensionName": ".css", "savePath": "~/../css/" }, { "format": "compressed", "extensionName": ".min.css", "savePath": "~/../css/" } ], "liveSassCompile.settings.generateMap": false, "liveSassCompile.settings.autoprefix": [ "> 1%", "last 2 versions" ] } }
Vous pouvez consulter la documentation complète à partir de la page de l’extension : https://marketplace.visualstudio.com/items?itemName=glenn2223.live-sass. Vous y trouverez la totalité des options, comme par exemple liveSassCompile.settings.includeItems
qui permet de spécifier quels fichiers .scss doivent être compilés.
liveSassCompile.settings.formats
: permet de définir les paramètres de sortie du compilateur :
format
: permet de définir le type de sortieexpanded
,compact
,compressed
ounested
(défaut expanded).extensionName
: correspond à l’extension à utiliser pour le fichier compilé. Il est ainsi possible d’ajouter un suffixe .min au nom du fichier css (défaut : .css).savePath
: pour le dossier d’enregistrement du fichier- Par défaut l’emplacement du fichier sass.
/
pour les chemins d’accès relatifs à la racine du projet.~
pour les chemins d’accès relatifs au fichier sass.
La configuration proposée dans l’exemple définit ainsi quatre fichiers de sortie. Il faudra évidemment supprimer les exemples de sortie qui ne vous intéressent pas. Vous pouvez par exemple choisir les deux premiers ou les deux derniers.
{ "format": "expanded", "extensionName": ".css", "savePath": "/dev/css" }
- Le fichier de sortie est en version étendue, ce qui correspond aux critères de présentation classique de CSS.
- Le nom du fichier est identique au fichier d’origine avec le remplacement de l’extension SCSS par CSS.
- Le fichier de sortie est créé dans le dossier
/dev/css
.
{ "format": "compressed", "extensionName": ".min.css", "savePath": "/dist/css/" }
- Le fichier correspondant est en version minifiée. Tous les commentaires et caractères inutiles sont supprimés.
- Le suffixe
-min
est ajouté au nom du fichier d’origine et l’extension SCSS est remplacée par CSS. - Le fichier de sortie est créé dans le dossier
/dist/css
.
{ "format": "expanded", "extensionName": ".css", "savePath": "~/../css/" }
- Le fichier de sortie est en version étendue, ce qui correspond aux critères de présentation classique de CSS.
- Le nom du fichier est identique au fichier d’origine avec le remplacement de l’extension SCSS par CSS.
- Le fichier de sortie est créé à partir de l’emplacement du fichier source grâce au
~
. Donc en fonction du fichier SCSS, il faut remonter d’un cran dans l’arborescence et ouvrir le dossiercss/
pour trouver le fichier de sortie.
{ "format": "compressed", "extensionName": ".min.css", "savePath": "~/../css/" }
- Le fichier correspondant est en version minifiée. Tous les commentaires et caractères inutiles sont supprimés.
- Le suffixe
-min
est ajouté au nom du fichier d’origine et l’extension SCSS est remplacée par CSS. - Le fichier de sortie est créé à partir de l’emplacement du fichier source grâce au
~
. Donc en fonction du fichier SCSS, il faut remonter d’un cran dans l’arborescence et ouvrir le dossiercss/
pour trouver le fichier de sortie.
liveSassCompile.settings.generateMap
: permet de demander de générer ou pas le fichier .map utilisé par le débogueur du navigateur pour faire le lien entre le fichier compilé et le fichier source (défaut : true).
Sauf mention contraire*, l'article Utiliser Sass avec le logiciel Visual Studio Code et son contenu par Julien Crego sont mis à disposition selon les termes de la licence Creative Commons
Attribution - Pas d’Utilisation Commerciale - Partage dans les Mêmes Conditions 4.0 International
Cette licence vous permet de remixer, arranger, et adapter cette œuvre à des fins non commerciales tant que vous créditez la source en citant le nom des auteurs et que les nouvelles œuvres sont diffusées selon les mêmes conditions.
* Cette notice est intégrée automatiquement à la fin de chaque article de ce site.