📚 Cours SCSS (Sass) 📍 Chapitre 2 / 21

Installation et outils pour SCSS

Dans ce chapitre, tu vas mettre en place un environnement de travail fonctionnel pour utiliser SCSS. Nous allons avancer pas à pas : comprendre les outils, installer ce qui est nécessaire, créer tes premiers fichiers SCSS et compiler vers du CSS utilisable par le navigateur.

Objectifs du chapitre

  • Comprendre pourquoi SCSS nécessite des outils supplémentaires.
  • Installer Node.js de manière propre.
  • Installer et utiliser Sass (CLI).
  • Créer une première structure de fichiers SCSS.
  • Compiler du SCSS en CSS.
À retenir

Sans compilation, le navigateur ne peut pas lire le SCSS. Installer Sass est une étape obligatoire pour travailler correctement.

Explications théoriques détaillées

Pourquoi faut-il installer des outils ?

Contrairement au CSS, le SCSS n'est pas interprété directement par le navigateur. Il doit être transformé en CSS par un programme appelé compilateur.

Sass fournit ce compilateur. Aujourd'hui, il fonctionne principalement via Node.js.

Node.js : à quoi ça sert ici ?

Node.js permet d'exécuter du JavaScript en dehors du navigateur. Dans notre cas, il sert uniquement à installer et exécuter Sass.

  • Tu n'as pas besoin de savoir programmer en Node.js.
  • Il sert de support technique pour les outils modernes.
Conseil terrain

Même si tu travailles surtout en HTML/CSS, Node.js est aujourd'hui incontournable pour les outils front-end modernes (SCSS, bundlers, tests).

Exemples simples

Étape 1 : vérifier l'installation de Node.js

Une fois Node.js installé, ouvre un terminal (Invite de commandes, PowerShell ou Terminal) et tape :

Bash
node -v
npm -v

Si des numéros de version s'affichent, Node.js est correctement installé.

Étape 2 : installer Sass (CLI)

Sass s'installe via npm (le gestionnaire de paquets fourni avec Node.js).

Bash
npm install -g sass

Vérifie ensuite l'installation :

Bash
sass --version
À retenir

L'option -g signifie "installation globale" : Sass sera utilisable dans tous tes projets.

Exemples concrets et professionnels

Créer une structure minimale de projet

Voici une structure simple et propre pour débuter :

STRUCTURE
projet-scss/
  scss/
    main.scss
  css/
    main.css
  index.html

Tu écriras toujours dans les fichiers .scss. Le dossier css contiendra le CSS généré automatiquement.

Premier fichier SCSS

Contenu de main.scss :

SCSS
$primary: #7aa7ff;

body {
  background: #0b1020;
  color: white;
}

h1 {
  color: $primary;
}

Compilation manuelle :

Bash
sass scss/main.scss css/main.css

CSS généré :

CSS
body {
  background: #0b1020;
  color: white;
}

h1 {
  color: #7aa7ff;
}

Compilation automatique (mode watch)

En pratique, on utilise presque toujours le mode "watch" :

Bash
sass --watch scss/main.scss css/main.css

À chaque sauvegarde du fichier SCSS, le CSS est automatiquement mis à jour.

Conseil terrain

Laisse toujours le mode watch actif pendant le développement : c'est plus rapide et évite les oublis.

Bonnes pratiques

Bonnes pratiques d'installation et d'outillage

  • Toujours séparer les fichiers .scss et .css.
  • Ne jamais modifier le CSS généré à la main.
  • Utiliser un terminal intégré (VS Code) pour plus de confort.
  • Commencer simple avant de complexifier l'architecture.
  • Documenter les étapes d'installation pour l'équipe.
À retenir

Un environnement bien configuré économise du temps et évite les erreurs fréquentes. Prends le temps de bien installer les outils dès le début.

Erreurs courantes

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

Toute modification dans le CSS sera écrasée à la prochaine compilation. Le fichier source est toujours le SCSS.

Erreur 2 : oublier le mode watch

Compiler manuellement à chaque modification devient vite pénible. Le mode watch est fait pour éviter cela.

Erreur 3 : installer Sass via des extensions uniquement

Certaines extensions compilent le SCSS, mais comprendre la CLI Sass est essentiel pour travailler proprement et de manière professionnelle.

Résumé du chapitre

Ce que vous avez appris
✓
SCSS nécessite une compilation vers CSS pour être interprété par les navigateurs.
✓
Node.js et Sass CLI sont les outils de base indispensables.
✓
Le mode watch automatise le travail et améliore la productivité.
✓
Il est crucial de séparer clairement les fichiers SCSS (source) et CSS (généré).

Prochain chapitre : Rappels essentiels de CSS

Avant de plonger dans les fonctionnalités avancées de SCSS, nous allons faire un rappel complet du CSS essentiel. Cette révision te permettra de partir sur des bases solides et de mieux comprendre comment SCSS étend et améliore CSS.

  • Sélecteurs CSS et spécificité
  • Box model et propriétés essentielles
  • Flexbox et Grid layout
  • Unités de mesure modernes (rem, em, vw, vh)
  • Les bases du responsive design
← Chapitre 1 Chapitre 3 →