Le package Sass autocompile pour Atom & VisualStudio

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 :

• Compiler le fichier SASS dans un fichier CSS

ctrl-shift-c

• Compilation directe ; remplace le texte SASS par le CSS compilé

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

• Vous avez le choix de compiler à l’enregistrement Avec cette option, vous pouvez activer ou désactiver la compilation automatique sur la fonctionnalité de sauvegarde. S’il est activé et que vous enregistrez un fichier avec .scss ou .sass l’extension de fichier, il est automatiquement compilé en fonction des options générales et des paramètres en ligne, s’ils sont définis. Défaut: true

• Compiler des fichiers…Avec cette option, vous pouvez décider si vous voulez compiler tous les fichiers SASS ou seulement ceux qui ont un commentaire de première ligne. Est-ce que je n’ai pas plus d’explications à ce sujet ? Défaut: Every SASS file

• La compilation des partiels. Lorsque vous compilez un fichier partiel (en l’enregistrant) et qu’il n’y a pas de commentaire de première ligne, vous pouvez contrôler si sass-autocompile compile ce fichier ou non Défaut: false

• Ecraser les fichiers déjà existants Si activé et que le fichier de sortie existe déjà, il vous est demandé si vous souhaitez l’écraser. Sinon, les fichiers sont automatiquement écrasés. Défaut: false

• En passant directement à l’erreur S’il est activé et que vous compilez un fichier SASS erroné, ce fichier est ouvert et sauté à la position problématique Défaut: false

• Vous pouvez afficher l’élément “Compiler SASS” dans le menu contextuel de l’arborescence. S’il est activé, il existe un élément de menu dans le menu contextuel de l’arborescence appelé Compile SASS . Cet élément est visible uniquement sur les fichiers qui ont .scss ou .sass l’extension de fichier. Défaut: true

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

Vous avez aimé l'article ? Partagez-le autour de vous !

Partager sur Facebook Partager sur Twitter Partager sur Linkedin