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.

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 le 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 document (en anglais) est plus complète et présente notamment les paramètres permettant d’exclure ou d’inclure des fichiers spécifique 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": "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 chemin d’accès relatifs à la racine du projet.
    • ~ pour les chemin d’accès relatifs au fichier sass.

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 ficiher 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 de messagerie 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.