Cours SCSS (Sass) Chapitre 19 / 21

Compilation, minification et sourcemaps

Le navigateur ne comprend pas le SCSS : il ne lit que du CSS. La compilation est donc une étape obligatoire entre ton code SCSS et le rendu final. Dans ce chapitre, tu vas apprendre à configurer un workflow clair entre développement et production, à minifier ton CSS, et à utiliser les sourcemaps pour déboguer efficacement.

Objectifs du chapitre

Comprendre le rôle de la compilation SCSS → CSS.
Savoir utiliser Sass en ligne de commande (CLI).
Distinguer les modes développement et production.
Mettre en place la minification du CSS.
Utiliser les sourcemaps pour déboguer.

À retenir

SCSS est un outil de développement. Le navigateur, lui, ne voit que le CSS final.

Explications théoriques détaillées

Du SCSS au CSS : la chaîne de transformation

Le processus est toujours le même :

Tu écris du SCSS (variables, mixins, maps…).
Sass compile ce SCSS en CSS standard.
Le navigateur charge uniquement le CSS.

Important

Si ton SCSS est cassé, ton CSS ne sera pas généré. La compilation est donc aussi une étape de validation.

Développement vs production

Développement : CSS lisible, sourcemaps activées.
Production : CSS minifié, sans commentaires inutiles.

Ces deux contextes ont des besoins différents. Il faut les séparer clairement.

Exemples simples

Installer Sass (CLI)

La méthode la plus courante est via Node.js :

BASH

npm install -g sass

Vérifier l'installation :

BASH

sass --version

Compiler un fichier SCSS en CSS

BASH

sass scss/main.scss css/style.css

À chaque exécution, le fichier CSS est régénéré à partir du SCSS.

Compilation automatique (mode watch)

Pour le développement, on utilise le mode --watch.

BASH

sass --watch scss/main.scss:css/style.css

À retenir

Le mode watch surveille les fichiers SCSS et recompile automatiquement au moindre changement.

Exemples concrets et professionnels

Cas pro 1 : sourcemaps pour déboguer

Les sourcemaps permettent au navigateur de faire le lien entre le CSS généré et le SCSS d'origine.

BASH

sass --watch scss/main.scss:css/style.css --source-map

Dans les DevTools du navigateur, tu peux alors voir et modifier le SCSS directement.

Conseil terrain

Active toujours les sourcemaps en développement. Elles font gagner énormément de temps.

Cas pro 2 : CSS minifié pour la production

Pour la production, on compresse le CSS afin de réduire la taille du fichier.

BASH

sass scss/main.scss css/style.min.css --style=compressed

Résultat : un CSS sans espaces ni retours à la ligne, beaucoup plus léger.

Cas pro 3 : scripts npm (workflow propre)

Dans un projet réel, on automatise avec package.json.

JSON

{
  "scripts": {
    "scss:dev": "sass --watch scss/main.scss:css/style.css --source-map",
    "scss:build": "sass scss/main.scss:css/style.min.css --style=compressed"
  }
}

Utilisation :

BASH

npm run scss:dev
npm run scss:build

À retenir

Les scripts rendent le workflow clair et reproductible pour toute l'équipe.

Cas pro 4 : structure de projet type

STRUCTURE

project/
├─ scss/
│  ├─ abstracts/
│  ├─ base/
│  ├─ components/
│  ├─ layout/
│  └─ main.scss
│
├─ css/
│  ├─ style.css
│  ├─ style.css.map
│  └─ style.min.css
│
└─ package.json

Le SCSS n'est jamais servi au navigateur : seul le dossier css/ l'est.

Bonnes pratiques

Séparer clairement développement et production.
Activer les sourcemaps uniquement en développement.
Minifier le CSS pour la production.
Ne jamais modifier le CSS généré à la main.
Versionner le SCSS, pas forcément le CSS minifié.

À retenir

Le SCSS est la source de vérité. Le CSS est un artefact généré.

Erreurs courantes

Erreur 1 : éditer le CSS généré

Toute modification sera écrasée à la prochaine compilation.

Erreur 2 : livrer un CSS non minifié

Ce n'est pas dramatique, mais c'est un manque de professionnalisme évitable.

Erreur 3 : oublier les sourcemaps en dev

Sans sourcemaps, déboguer devient beaucoup plus pénible.

Résumé du chapitre

Ce que vous avez appris

✓

La compilation transforme le SCSS en CSS exploitable par le navigateur.

✓

Le mode watch accélère le développement.

✓

La minification réduit la taille du CSS en production.

✓

Les sourcemaps relient CSS et SCSS pour un débogage efficace.

Prochain chapitre : Débogage SCSS

Dans le prochain chapitre, nous verrons le débogage SCSS : erreurs de compilation, warnings, outils, et méthodes pour corriger rapidement les problèmes.

Comprendre les messages d'erreur Sass
Déboguer les problèmes de compilation
Outils de validation SCSS
Techniques de résolution des problèmes courants