01
Introduction à SCSS et aux préprocesseurs CSS
- 1.1 Qu'est-ce qu'un préprocesseur CSS
- 1.2 Pourquoi utiliser SCSS plutôt que du CSS classique
- 1.3 Différences entre CSS et SCSS
- 1.4 Cas d'usage professionnels de SCSS
Maîtrisez SCSS, le préprocesseur CSS professionnel
Ce cours progressif vous guide de zéro à la maîtrise de SCSS (Sass) à travers 21 chapitres détaillés. Chaque chapitre est conçu avec des exemples pratiques, des exercices et des bonnes pratiques issues de l'expérience terrain.
21 Chapitres
Contenu complet et progressif
Projet Final
Mise en pratique complète
Débutant à Avancé
Progression garantie
02
Installation et outils pour SCSS
- 2.1 Prérequis techniques
- 2.2 Installation de Node.js
- 2.3 Installation de Sass (CLI)
- 2.4 Utilisation de Sass en ligne de commande
- 2.5 Extensions SCSS recommandées pour VS Code
03
Rappels essentiels de CSS
- 3.1 Syntaxe CSS de base
- 3.2 Sélecteurs, propriétés et valeurs
- 3.3 Box model et positionnement
- 3.4 Bonnes pratiques CSS avant SCSS
04
Variables en SCSS
- 4.1 Déclaration des variables
- 4.2 Types de variables (couleurs, tailles, textes)
- 4.3 Utilisation des variables dans les styles
- 4.4 Bonnes pratiques de nommage
05
Imbrication des règles (Nesting)
- 5.1 Principe de l'imbrication
- 5.2 Imbrication des sélecteurs
- 5.3 Utilisation du symbole
& - 5.4 Limites et bonnes pratiques du nesting
06
Partials et organisation des fichiers SCSS
- 6.1 Qu'est-ce qu'un partial SCSS
- 6.2 Convention de nommage (
_fichier.scss) - 6.3 Structuration d'un dossier SCSS
- 6.4 Importation des fichiers SCSS
07
Gestion des modules avec @use et @forward
- 7.1 Pourquoi remplacer
@import - 7.2 Utilisation de
@use - 7.3 Partage de fichiers avec
@forward - 7.4 Gestion des namespaces
08
Mixins SCSS
- 8.1 Introduction aux mixins
- 8.2 Création d'une mixin
- 8.3 Paramètres et valeurs par défaut
- 8.4 Cas pratiques (responsive, boutons, flexbox)
09
Fonctions SCSS
- 9.1 Fonctions natives SCSS
- 9.2 Création de fonctions personnalisées
- 9.3 Différences entre mixins et fonctions
- 9.4 Cas d'usage concrets
10
Boucles en SCSS
- 10.1 Boucle
@for - 10.2 Boucle
@each - 10.3 Boucle
@while - 10.4 Génération automatique de classes
11
Conditions en SCSS
- 11.1 Utilisation de
@if - 11.2 Conditions avec
@else - 11.3 Logique conditionnelle avancée
- 11.4 Cas pratiques
12
Maps SCSS
- 12.1 Introduction aux maps
- 12.2 Déclaration et lecture des maps
- 12.3 Maps et responsive design
- 12.4 Maps et thèmes graphiques
13
Héritage et @extend
- 13.1 Principe de l'héritage
- 13.2 Utilisation de
@extend - 13.3 Avantages et inconvénients
- 13.4 Bonnes pratiques
14
Gestion avancée des couleurs avec SCSS
- 14.1 Fonctions de couleurs SCSS
- 14.2 Manipulation de luminosité et saturation
- 14.3 Création de palettes dynamiques
- 14.4 Thématisation d'un site
15
Typographie avec SCSS
- 15.1 Variables typographiques
- 15.2 Mixins pour les textes
- 15.3 Hiérarchie typographique
- 15.4 Responsive typography
16
Responsive design avec SCSS
- 16.1 Breakpoints en SCSS
- 16.2 Mixins pour le responsive
- 16.3 Mobile-first avec SCSS
- 16.4 Organisation des media queries
17
Architecture SCSS professionnelle
- 17.1 Présentation de l'architecture 7-1
- 17.2 Organisation des dossiers
- 17.3 Conventions de nommage
- 17.4 Maintenabilité et évolutivité
18
Bonnes pratiques et performances
- 18.1 SCSS propre et lisible
- 18.2 Éviter le code redondant
- 18.3 Optimisation du CSS généré
- 18.4 Erreurs courantes à éviter
19
Compilation, minification et sourcemaps
- 19.1 Compilation SCSS vers CSS
- 19.2 Mode développement vs production
- 19.3 Minification du CSS
- 19.4 Utilisation des sourcemaps
20
Débogage SCSS
- 20.1 Erreurs fréquentes en SCSS
- 20.2 Lecture des messages d'erreur
- 20.3 Outils de débogage
- 20.4 Méthodologie de correction
21
Mini-projet final SCSS
- 21.1 Présentation du projet
- 21.2 Mise en place de l'architecture SCSS
- 21.3 Intégration complète des styles
- 21.4 Compilation finale et optimisation