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 l'extensions sur Visual Studio Code

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 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.

Formats 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.
Formats 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.
Formats 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.
Formats 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).

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.

S’abonner
Notification pour
guest

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

0 Commentaires
Le plus ancien
Le plus récent Le plus populaire
Commentaires en ligne
Afficher tous les commentaires