Le package Sass autocompile pour Atom & VisualStudio - Promatec Digital
Le package Sass autocompile pour Atom & VisualStudio par Promatec Digital | Temps de lecture : 3 minutes

Promatec Digital Blog Oh My Blog ! ...

Sass autocompile compile automatiquement les fichiers SASS lors de la sauvegarde ou via un raccourci, avec de nombreuses possibilités de configuration.

Inspiré du package less-autocompile , écrit par lohek . Ce paquet peut compiler automatiquement les fichiers SASS (fichier se terminant par : .scss ou .sass) lorsque vous l’enregistrez. Ou vous pouvez utiliser des raccourcis pour le faire. A côté de cela, ce package est hautement configurable pour répondre à tous vos besoins.

Conditions

Pour le moment, vous ne pouvez utiliser ce package que lorsque vous installez node.js et node-sass sur votre système. Il est important que vous installiez node-sass globalement (commande : npm install node-sass -g), il est donc possible d’y accéder via CLI.

La raison pour laquelle sass-autocompile en a besoin est que node-sass n’est pas compatible avec atom shell dans la version actuelle (2.0.1), il ne peut donc pas être ajouté en tant que dépendance. Cela changera probablement plus tard, vous n’aurez donc pas à installer node.js et node-sass en plus.

Usage

Important : installez node.js et node-sass avant.

Compilation SASS de base

Après avoir installé ce paquet, l’option Compiler à l’enregistrement est activée, donc si vous enregistrez un fichier SASS, il est automatiquement compilé dans un fichier CSS. Depuis la version 0.10.0, vous n’avez plus besoin d’un commentaire de première ligne pour compiler les fichiers SASS, sauf que vous le définissez par option.

Vous pouvez également utiliser des raccourcis pour démarrer la compilation :

ctrl-shift-c
alt-shift-c/ cmd-shift-c

La troisième méthode consiste à utiliser le menu contextuel de l’arborescence où vous pouvez trouver un élément Compile SASS lorsque vous cliquez avec le bouton droit sur un fichier avec l’ extension .scss ou ..sass

Remarque : Lorsque vous souhaitez compiler un fichier SASS en un fichier CSS (→ Compiler vers un fichier ), l’extension de fichier doit être .scss ou .sass. Vous n’avez pas besoin d’un commentaire de première ligne depuis la version 0.10.0.

Après avoir compilé un fichier SASS, vous devriez voir une notification ou un panneau en bas de l’éditeur, selon vos paramètres, vous montrant un message d’erreur ou de réussite. Si vous utilisez la notification du panneau , vous avez la possibilité d’accéder au fichier CSS de sortie en cliquant sur le message de compilation. Si la compilation échoue, vous pouvez même sauter à la position d’erreur dans le fichier SASS correspondant où l’erreur s’est produite.

Lorsque vous utilisez la notification du panneau, vous pouvez utiliser Afficher le lien de sortie détaillée dans la légende de l’en-tête du panneau pour ouvrir la sortie détaillée de la node-sasscommande (disponible depuis la version 0.7.0). De plus, vous pouvez définir l’option pour afficher automatiquement la sortie après la compilation.

Compiler dans un fichier

Cette fonctionnalité est le comportement par défaut et la méthode que vous utiliserez le plus. Il compile un fichier SASS en un fichier CSS. Lorsque vous enregistrez un fichier SASS ou utilisez le menu contextuel de l’arborescence, cette méthode est utilisée.

Compilation directe

Lorsque vous souhaitez compiler instantanément un texte SASS, vous pouvez le copier dans un nouvel onglet et appuyer sur

alt-shift-c/ cmd-shift-c

Ce package compile ensuite l’entrée SASS et la remplace par le CSS compilé.

Options et paramètres

Depuis la version 0.10.0, il existe de nombreuses nouvelles options. Jetez donc un œil aux options du package et configurez le comportement général pour la compilation des fichiers SASS. 

Pour écraser les options générales afin d’utiliser une configuration spécifique par projet, vous pouvez définir des paramètres sous forme de commentaire sur la première ligne. 

Choix

De plus, vous pouvez ajouter un chemin relatif ou absolu où les fichiers compilés sont stockés.

Les News les plus populaires !