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, nous allons devoir utiliser un compilateur dont le rôle va être de traduire les fichiers .sass ou .scss (fichiers Sass) en fichiers .css (fichiers CSS classiques) compréhensibles par le navigateur.
Nous avons deux moyens de faire cela : on peut soit utiliser une application qui se chargera de compiler le code Sass, soit installer Sass (qui embarque son propre compilateur) via notre ligne de commande pour ensuite pouvoir utiliser le compilateur Sass directement depuis celle-ci.
Je vais vous présenter les deux façons de faire ici car selon votre situation / entreprise vous aurez accès à certains outils et pas à d’autres et il est important que vous sachiez vous débrouiller en fonction des outils auxquels vous avez accès.
Installation de Sass via la ligne de commande
L’interface en ligne de commande est une interface qui nous permet d’envoyer des commandes directement à notre machine en utilisant notre clavier. Si vous travaillez avec Mac, cherchez l’application Terminal. Si vous travaillez avec Windows, cherchez PowerShell ou l’Invite de Commande (cmd).
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.
Nous pouvons installer Sass à partir de plusieurs sources différentes en utilisant notre interface en ligne de commande. On peut cloner le dépôt Sass à partir de GitHub ou installer le paquet Sass via npm (Node Package Manager).
Dans ce cours, nous allons utiliser npm, le gestionnaire de paquets et le gestionnaire de paquets officiel de Node.js. 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.
Pour installer Sass, il suffit de taper la commande npm install -g sass dans votre interface en ligne de commande.
Cette commande va installer Sass globalement. Si vous préférez une installation locale, tapez simplement npm install sass à partir du répertoire dans lequel vous souhaitez installer Sass.
sass --version pour vérifier que Sass a bien été installé. Si c’est le cas, cette commande vous renverra le numéro de version installée.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.
Installation de Sass via une application
De nombreuses applications proposent également une prise en charge et la compilation des fichiers Sass. C’est notamment le cas de Visual Studio Code.
En effet, Visual Studio Code dispose de nombreuses extensions gratuites et directement installables. Pour accéder à ces extensions, il suffit de cliquer sur l’icône « Extensions » sur le panneau gauche de l’éditeur.
Parmi ces extensions, il y a notamment une extension nommée « Live Sass Compiler » qui va, comme son nom l’indique, compiler le code Sass en live en code CSS. Cherchez cette extension dans la barre de recherche et installez la.
Une fois l’extension installée, créez un nouveau dossier qu’on va appeler « sass-vs » sur votre bureau par exemple.
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.
Cliquez ensuite sur « ouvrir un dossier » dans l’explorateur de VS Code et ouvrez le dossier tout juste créé.
A partir de là, cliquez sur votre fichier cours.scss puis cliquez sur l’option « watch sass » en bas de la fenêtre. Deux fichiers cours.css et cours.css.map vont alors être automatiquement créés dans ce même dossier :
Nous n’avons alors plus qu’à écrire notre code Sass dans notre fichier cours.scss. A chaque sauvegarde du fichier cours.scss, le code est automatiquement compilé et enregistré dans le fichier cours.css.
