Utiliser Sass avec le logiciel Atom

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

Installation de Node.js

Afin de pouvoir utiliser l’extension sass-autocompile, vous allez devoir au préalable installer Node.js sur votre machine. Pour cela, vous avez deux solutions à votre disposition :

  • Utiliser l’installeur de Node.js ;
  • Utiliser le gestionnaire de version nvm (méthode recommandée sur Mac).

Utiliser l’installeur de node.js

Node.js est une une plateforme logicielle libre pour JavaScript permettant l’utilisation du langage en dehors d’un navigateur.

Téléchargez le logiciel Node.js sur le site suivant https://nodejs.org/fr/download/

Lancez l’installeur et suivez les différentes étapes afin de procéder à l’installation du logiciel. Node.js va être installé avec le logiciel npm qui est le gestionnaire de paquets officiel de Node.js.

Options d'installation de Node.js

À la fin de l’installation, il vous est demandé de vous assurer que /usr/local/bin est bien dans la variable $PATH.

Vérification à la fin de l'installation de Node.js

Si vous souhaitez vérifier que le dossier /usr/local/bin est bien dans la variable $PATH, veuillez suivre la procédure adaptée à votre système.

Installez le paquet node-sass globalement :

npm install -g node-sass

Pour les utilisateurs de Os X vous devez ajouter sudo devant la commande pour éviter l’erreur concernant les droits utilisateurs.

Utiliser le gestionnaire de version nvm

Nvm signifie Node Version Manager. Ce logiciel est utilisé afin de gérer facilement l’installation de plusieurs versions de Node.js sur le même ordinateur.

Installez le gestionnaire de version nvm en saisissant le code suivant dans un terminal. Rendez-vous sur la page du projet nvm afin de déterminer la dernière version de nvm (ici 0.35.0).

curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.35.0/install.sh | bash

Relancez votre terminal.

Lancez la commande d’installation de Node.js suivante permettant d’installer la dernière version.

nvm install node

Installez le paquet node-sass globalement :

npm install -g node-sass

Configuration d’Atom

Installation du plugin de compilation Sass

Ouvrez le gestionnaire de package d’Atom et recherchez le package sass-autocompile pour l’installer.

Installation du package sass-autocompile

Configuration du plugin

Configurer le plugin sass-autocompile avec les paramètres de votre choix. Voici un exemple de paramétrage conseillé :

Compile on save : cochez la case afin de lancer la compilation automatiquement dès que vous enregistrez les modifications d’un fichier.

Compile with compressed output style : cochez la case afin de générer des fichiers css compressés. Ce format est idéal pour l’utilisation en production.

Filename pattern for ‘compressed’ compiled files : saisissez le nom des fichiers de destination en fonction de l’arborescence de fichiers que vous souhaitez. La proposition ci-dessous permet, par exemple, d’ajouter un suffixe min aux noms des fichiers css et de les placer dans un dossier nommé css.

../css/$1.min.css

Build source map : cochez la case pour générer un fichier de source .map. Il s’agit d’un fichier grâce auquel le débogueur du navigateur peut faire le lien entre le code exécuté et les fichiers originaux.

Sauf mention contraire*, l'article Utiliser Sass avec le logiciel Atom 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.