Heritiana Antonio Frond end Designer | Developer

Hello, I am

Heritiana Antonio

Frond end Designer | Developer

Chapitre 1 : Installer Sass et compiler un premier fichier

1 min de lecture

Chapitre 1 : Installer Sass et compiler un premier fichier

Objectif

À la fin de ce chapitre, vous savez installer Sass, créer un fichier .scss et le compiler en .css. Vous savez aussi lier ce CSS à une page HTML, relancer la compilation à chaque enregistrement, et lire une erreur simple du compilateur.

HTML et CSS sont déjà acquis. Sass ne les remplace pas : il fabrique le CSS que le navigateur sait lire. Aujourd’hui, le but est seulement de mettre l’outil en marche. Variables, imbrication et fichiers séparés viendront ensuite.

Pourquoi compiler

Le navigateur comprend le HTML et le CSS. Il ne comprend pas un fichier Sass. Sass est un préprocesseur : vous écrivez une source, un programme la transforme en CSS ordinaire. Cette étape s’appelle la compilation. Sans elle, la page n’a pas de styles, même si la source est correcte.

Sass est le nom du langage. Le SCSS, extension .scss, ressemble au CSS : accolades, deux-points, points-virgules. Une écriture plus ancienne se passe d’accolades et utilise .sass. Ce cours n’emploie que le SCSS, qui peut contenir du CSS copié tel quel.

Le fichier .scss est celui que vous modifiez. Le fichier .css est celui que la page charge. Vous ne retouchez pas le résultat à la main : à la compilation suivante, il est réécrit à partir de la source.

Installer Dart Sass

L’outil actuel s’appelle Dart Sass. L’ancienne version en Ruby n’est plus maintenue. Le paquet node-sass non plus : il reposait sur LibSass, qui ne suit plus le langage. Si un tutoriel propose l’un de ces deux noms, ignorez-le.

Dart Sass s’installe avec npm, livré avec Node.js. Installez la version LTS depuis le site officiel de Node.js, puis rouvrez le terminal.

node -v
npm -v

Chaque commande doit afficher un numéro de version. Le chiffre exact importe peu. Un message « commande introuvable » veut dire que l’installation n’est pas visible : le terminal a souvent été ouvert trop tôt.

Ranger l’outil dans le projet

Créez un dossier mon-sass et placez-y le terminal.

npm init -y
npm install --save-dev sass
npx sass --version

npm init -y écrit package.json, la fiche du projet. La commande suivante télécharge Dart Sass dans node_modules. Ce dossier peut être lourd : vous ne l’ouvrez pas, vous ne le modifiez pas. C’est la réserve du compilateur, pas le site. L’installer dans le projet évite les droits d’administrateur et fige la version utilisée ici.

npx lance le programme de ce dossier. Un numéro s’affiche, par exemple 1.89.2. La compilation peut commencer.

Écrire la source

Créez les dossiers scss et css. Le premier reçoit la source, le second recevra le résultat. Écrivez scss/style.scss.

$encre: #1f2933;

body {
  font-family: Georgia, serif;
  color: $encre;
  margin: 2rem;
}

p {
  line-height: 1.6;
}

Presque tout est du CSS habituel. La ligne $encre: #1f2933; nomme une couleur, et color: $encre; utilise ce nom. Le navigateur ignore $encre. Le compilateur le remplace par la couleur. Une seule variable suffit pour voir la transformation. Le chapitre suivant explique les variables et l’imbrication : n’en ajoutez pas d’autres pour l’instant.

Produire le CSS

Le terminal doit être à la racine de mon-sass, au même niveau que package.json, pas dans scss.

npx sass scss/style.scss css/style.css

Le premier chemin est l’entrée, le second la sortie. Quand tout va bien, Sass rend souvent la main sans message. Ouvrez css/style.css. Vous y trouvez la feuille suivante, aux espaces près.

body {
  font-family: Georgia, serif;
  color: #1f2933;
  margin: 2rem;
}

p {
  line-height: 1.6;
}

La variable a disparu. La couleur est écrite en clair. Ce fichier est celui que le navigateur peut charger. S’il n’existe pas, la commande a été lancée depuis le mauvais dossier : Sass le signale.

Un fichier style.css.map peut apparaître à côté. Laissez-le : le dernier chapitre explique les source maps et le CSS allégé. Vous n’avez pas à l’ouvrir aujourd’hui.

Afficher la page

Créez index.html à la racine. Le lien pointe vers le CSS compilé, jamais vers le .scss.

<!DOCTYPE html>
<html lang="fr">
<head>
  <meta charset="utf-8">
  <title>Premier essai Sass</title>
  <link rel="stylesheet" href="css/style.css">
</head>
<body>
  <p>Cette page charge le CSS compilé.</p>
</body>
</html>

Ouvrez la page dans le navigateur. Le paragraphe doit utiliser Georgia, une marge et la couleur encre. S’il reste noir et collé au bord, le lien est faux ou le CSS n’a pas été produit. Depuis index.html, css/style.css entre dans le dossier css. Un chemin vers scss/ chargerait la source, et la page resterait sans style.

Recompiler tout seul

Retaper la commande à chaque essai lasse vite. La veille relance la compilation dès que vous enregistrez :

npx sass --watch scss/style.scss css/style.css

Le terminal ne rend pas la main. Il attend. Changez $encre pour #9b2226, enregistrez, puis lisez le terminal : une ligne confirme que le CSS a été réécrit. Rechargez la page. Le texte change de couleur. Ctrl+C arrête la veille. Le CSS déjà écrit reste en place.

Deux oublis sont fréquents. Modifier le SCSS pendant que la veille est arrêtée, puis recharger : le navigateur relit l’ancien CSS. Corriger style.css à la main : la compilation suivante écrase la correction. Quand l’affichage ne suit pas, vérifiez la source, la veille, l’enregistrement, puis le rechargement.

Lire une erreur

Retirez le point-virgule dans la source :

body {
  color: #1f2933
}

Dart Sass refuse le fichier. Le message dit qu’il attendait un point-virgule, et il donne le fichier ainsi que la ligne. Lisez cette première indication : la suite répète souvent la même faute. Sass peut aussi écrire l’erreur dans le CSS, ce qui l’affiche en haut de la page. Ce texte ne fait pas partie du site. Il disparaît dès que la source recompile. Remettez le point-virgule, enregistrez, rechargez.

Si la page est laide et que le terminal se tait, cherchez un mauvais lien ou un CSS ancien. Un message du compilateur, lui, concerne toujours le .scss.

Exercice

Construisez mon-sass vous-même, sans partir d’une archive déjà compilée.

  1. Faites répondre node -v, puis installez Sass dans le projet.
  2. Écrivez scss/style.scss avec $encre, une règle body et une règle p.
  3. Compilez vers css/style.css. La couleur doit y être en hexadécimal, plus sous la forme $encre.
  4. Créez index.html, liez css/style.css, ouvrez la page.
  5. Lancez la veille, changez la couleur, enregistrez, rechargez. Arrêtez ensuite avec Ctrl+C.
  6. Enlevez un point-virgule, lisez le message, réparez la source.

C’est réussi quand vous dites, sans notes, quel fichier vous modifiez et quel fichier le navigateur charge. Sinon, refaites l’étape 5.

À retenir

  • Sass se compile. Le navigateur ne charge que le CSS produit.
  • On écrit du SCSS, extension .scss. L’outil s’appelle Dart Sass, paquet sass.
  • La commande nomme l’entrée, puis la sortie. --watch recommence à chaque enregistrement.
  • On corrige la source, jamais le CSS généré.
  • Une erreur se lit dès la première ligne utile : fichier, ligne, caractère attendu.

La suite

Ce chapitre n’a utilisé qu’une variable, assez pour voir le compilateur travailler. La leçon suivante, « Variables et imbrication », s’arrête sur ces deux idées : nommer couleurs et mesures une seule fois, puis ranger les sélecteurs dans le même ordre que le HTML. Gardez le dossier mon-sass. Il servira de départ, sans nouvelle installation.