Présentation et installation de Sass et configuration de notre environnement de travail

Présentation de Sass

Sass est un préprocesseur CSS. Un préprocesseur est un programme qui procède à des transformations sur un code source avant l’étape de traduction proprement dite (compilation dans le cas de Sass ou interprétation pour d’autres types de préprocesseur).

Sass permet en quelques sortes “d’étendre” les possibilités du CSS classique en nous permettant d’utiliser des variables, des règles imbriquées, des mixins, des fonctions, etc. Nous allons voir dans la suite de ce cours en quoi ces éléments vont nous aider à créer un meilleur CSS, plus intuitif et mieux organisé.

La structure d’un fichier SCSS va ressembler à celle de nos fichiers CSS classiques : nous allons utiliser des déclarations pour indiquer quels styles doivent être appliqués à quels éléments. Cependant, nous allons également pouvoir utiliser des fonctionnalités propres à SASS pour nous permettre d’avoir un code plus clair et plus facilement maintenable, comme par exemple l’imbrication de sélecteurs ou l’héritage de règles CSS.

Avant d’utiliser Sass à proprement parler, vous devez savoir que SASS supporte deux syntaxes différentes. Ces deux syntaxes sont représentées par deux extensions de fichiers différentes : les extensions .scss et .sass.

La syntaxe liée à l’extension .sass, qu’on appelle encore “syntaxe indenté”, est la syntaxe originelle de Sass. Cette syntaxe utilise notamment l’indentation à la place des accolades pour spécifier la structure du document.

La syntaxe liée à l’extension .scss est un sur-ensemble du CSS, ce qui signifie que tout code CSS valide est également reconnu et valide en SCSS. Cela rend cette syntaxe plus simple d’utilisation que la précédente, et c’est donc sur celle-ci que ce cours sera basé.

 

Installation de Sass

Les navigateurs ne comprennent pas le code Sass. Pour utiliser Sass, il va avant tout falloir l’installer en téléchargeant les fichiers du paquet Sass puis il va falloir utiliser un compilateur dont le rôle va être de compiler les fichiers .sass ou .scss (fichiers Sass) en fichiers .css (fichiers CSS classiques) compréhensibles par le navigateur.

Il existe deux moyens principaux d’installer Sass :

  1. On peut télécharger le paquet (package) Sass directement depuis le répertoire Github et l’ajouter à notre variable PATH ;
  2. On peut utiliser npm (node package manager).

Dans ce cours, je vais installer Sass en utilisant npm car dans tous les cas tout bon développeur doit connaitre Node.js et npm aujourd’hui. Si vous ne possédez pas encore npm, il va donc avant tout falloir l’installer.

La façon la plus simple d’installer npm est d’installer Node.js puisque npm est livré avec. Pour cela, rendez-vous sur le site nodejs.org et téléchargez la dernière version stable (LTS) de Node.

Pour vérifier que l’installation s’est bien passée, vous pouvez ouvrir votre Terminal (Mac) ou Invite de commande (Windows) et taper node -v qui devrait vous renvoyer la version de Node.js installée et npm -v qui devrait vous renvoyer la version de npm installée.

Note : pour ce cours, vous n’avez pas véritablement besoin de savoir comment fonctionne une interface en ligne de commande (Terminal, Invite de commande) puisque nous n’allons taper que quelques commandes pour installer les composants nécessaires pour utiliser Sass. Je vous recommande toutefois fortement d’apprendre à utiliser l’interface en ligne de commande car cela vous sera très utile dans votre futur de développeur. Vous pouvez à ce sujet consulter mon cours sur le shell Bash.

Une fois npm installé, vous pouvez taper la commande npm install -g sass dans votre Terminal / Invite de commande pour installer Sass.

Si vous venez juste d’installer npm, il est possible qu’une erreur relative aux permissions vous soit renvoyée (notamment avec Mac) lors de la tentative d’installation de Sass et que celle-ci échoue donc.

Pour résoudre ce problème, vous avez deux solutions : changer les permissions du répertoire /usr/local/ ou créer un autre répertoire pour l’installation des paquets ou modules npm.

Il n’est pas recommandé de changer le propriétaire du fichier, notamment dans le cas où plusieurs utilisateurs utilisent votre machine. On va plutôt créer un nouveau répertoire dans lequel on installera nos paquets.

Pour cela, on commence par cd pour retourner dans notre répertoire de départ puis on crée un répertoire qu’on peut appeler “npm-global” avec mkdir npm-global.

Ensuite, il faut qu’on définisse ce répertoire comme préfixe avec la commande npm config set prefix /Users/votre_nom_utilisateur/npm-global. Vous devriez maintenant être capable d’installer n’importe quel paquet dans ce répertoire.

Pour exécuter les commandes des paquets installés, cependant, il va falloir qu’on ajoute ce répertoire à la liste des répertoire de notre variable $PATH (qui est une variable contenant une liste de répertoires indiquant à votre système d’exploitation où rechercher des programmes).

Pour faire cela, tapez cd pour retourner dans votre répertoire home puis tapez la commande vi ~/.profile . Dans le fichier profile, ajoutez la ligne export PATH=/USERS/pierre/npm-global/bin:$PATH. Pour sortir de l’éditeur vi, pressez la touche échap puis pressez shift et appuyez deux fois sur z.

Il ne reste plus alors qu’à rafraîchir la variable afin que la ligne ajoutée soit bien prise en compte par le système. Pour cela, on peut utiliser la commande source ~/.profile.

 

Configuration de l’éditeur de texte et installation d’un processeur Sass

Nous pouvons désormais écrire du code Sass. Cependant, en l’état, le code Sass ne sera pas compris par le navigateur car celui-ci ne comprend que du code CSS pur. Nous allons donc devoir installer un processeur Sass dont le rôle sera de convertir le code Sass en code CSS pour le navigateur.

Certains risquent de se demander l’intérêt de faire tout cela si au final notre code est reconverti en CSS classique. Ce que vous devez comprendre ici est qu’on veut utiliser Sass pour créer un meilleur code CSS de notre côté. On utilise Sass pour nous faciliter la vie grâce à la création d’un code plus clair, plus facilement réutilisable et maintenable.

L’installation du processeur Sass est très simple : nous allons simplement devoir télécharger un plugin pour notre éditeur de texte ou IDE.

Pour ma part, j’utilise l’excellent Visual Studio Code de Microsoft comme IDE. Pour installer un compilateur Sass avec Visual Studio, il suffit d’aller dans l’onglet “extensions” et de chercher le plugin “sass live compiler” puis de l’installer.

Installation d'un compiler Sass live

Une fois le compilateur installé, je vous invite à créer un dossier qu’on va appeler “sass-cours” depuis votre éditeur et de l’enregistrer sur le bureau.

Nous allons créer un fichier “cours.html” dans ce dossier et un sous-dossier “css” dans lequel nous allons créer un fichier “styles.scss”.

A ce stade, si vous utilisez le même éditeur que moi, vous devriez avoir une option “watch sass” en bas de l’éditeur lorsque vous vous trouvez dans votre fichier Sass tout juste créé. Cliquez sur cette option. Deux nouveaux fichiers “styles.css” et “styles.css.map” vont alors être automatiquement créés.

Les fichiers de style Sass

Nous ne toucherons pas à ces deux fichiers : le fichier “styles.css” va être automatiquement généré par rapport à notre fichier “styles.scss”. En effet, c’est tout le rôle du compilateur : nous écrivons du code Sass et le compilateur le compile automatiquement en code CSS compréhensible par le navigateur.