Utiliser Sass avec le logiciel Visual Studio Code

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.

Installation de 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éer un dossier de travail (un dossier racine).

Lancez Visual Studio Code.

Ajoutez votre dossier de travail au Workspace : File / Add folder to Worspace…

Enregistrez votre espace de travail (Workspace) : File / Save Workspace as…

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 :

Les explications ci-dessous sont très largement inspirées de la documentation officielle disponible sur le github du projet. Cette documentation (en anglais) est plus complète et présente notamment les paramètres permettant d’exclure ou d’inclure des fichiers spécifiques pour le traitement du compilateur.

{
	"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"
		]
	}
}

liveSassCompile.settings.formats : permet de définir les paramètres de sortie du compilateur :

  • format : permet de définir le type de sortie expanded, compact, compressed ou nested (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.

Fichier de sortie
{
    "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.

Fichier de sortie
{
    "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.

Fichier de sortie
{
    "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 dossier css/ pour trouver le fichier de sortie.

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 dossier css/ 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).

liveSassCompile.settings.autoprefix : permet d’ajouter automatiquement les préfixes vendeurs lors de la compilation du CSS afin de s’assurer du bon fonctionnement des propriétés CSS qui ne sont pas supportées dans tous les navigateurs.

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

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.

Laisser un commentaire

Votre adresse e-mail ne sera pas publiée. Les champs obligatoires sont indiqués avec *

Ce site utilise Akismet pour réduire les indésirables. En savoir plus sur comment les données de vos commentaires sont utilisées.