Module 2 : SCSS - Préprocesseur CSS

Introduction

SCSS (Sassy CSS) est un préprocesseur CSS qui étend les capacités du CSS standard en ajoutant des fonctionnalités puissantes comme les variables, l'imbrication, l'héritage de styles et bien plus. Ce cours vous permettra de maîtriser SCSS pour écrire du code CSS plus maintenable, organisé et efficace.

Objectifs du cours

Comprendre le rôle et les avantages d'un préprocesseur CSS
Apprendre à compiler du SCSS en CSS avec l'extension Live Sass Compiler pour VS Code
Maîtriser l'utilisation des variables en SCSS
Appliquer l'imbrication de règles pour une meilleure organisation
Utiliser @extend pour réutiliser des règles de style
Pratiquer avec des outils et exercices pratiques

Théorie

1 : Qu'est-ce qu'un préprocesseur CSS ?

Définition

Un préprocesseur CSS est un outil qui permet d'écrire du code dans un langage étendu (comme SCSS, SASS ou LESS), puis de le compiler en CSS standard que les navigateurs peuvent interpréter.

SCSS signifie "Sassy CSS" et utilise une syntaxe très proche du CSS classique, ce qui facilite son apprentissage. Le fichier SCSS (extension .scss) est transformé en fichier CSS (extension .css) lors de la compilation.

alt text

Important : Dans ce cours, nous allons utiliser exclusivement le standard SCSS, qui est le plus populaire et le plus facile à apprendre pour les développeurs familiarisés avec CSS.

Syntaxe SCSS :

scss

// SCSS avec variables et imbrication
$couleur-primaire: #3498db;
body {
    font-family: 'Arial', sans-serif;
    color: $couleur-primaire;

    h1 {
        font-size: 2em;
        margin-bottom: 20px;
    }
}

Une fois compilé par le plugin Live Sass Compiler, le code produit le CSS suivant :

css

body {
    font-family: 'Arial', sans-serif;
    color: #3498db;
}
body h1 {
    font-size: 2em;
    margin-bottom: 20px;
}

Avantages des préprocesseurs CSS

Avantage	Description
Variables	Stocker des valeurs réutilisables (couleurs, tailles, polices)
Imbrication	Organiser le code de manière hiérarchique
Réutilisation	Partager des styles entre plusieurs sélecteurs
Maintenance	Modifier un seul endroit pour impacter tout le projet
Lisibilité	Code plus clair et mieux structuré

À retenir :

Le navigateur ne comprend pas le SCSS directement (donc il n'inclura jamais un fichier .scss)
Il faut compiler le SCSS en CSS avant de l'utiliser
Les fichiers SCSS ont l'extension .scss
Les fichiers CSS générés ont l'extension .css
Le SCSS n'est pas un langage différent du CSS, c'est une extension qui ajoute des fonctionnalités au CSS standard et qui permet de compiler du code SCSS en CSS valide, mieux structuré et plus maintenable.

2 : Compiler du SCSS en CSS avec l'extension Live Sass Compiler

Définition

La compilation est le processus de transformation du code SCSS en code CSS valide. Pour simplifier ce processus, nous utiliserons l'extension Live Sass Compiler de VS Code qui compile automatiquement nos fichiers SCSS.

Installation de l'extension Live Sass Compiler

Ouvrir VS Code
Aller dans l'onglet Extensions (Ctrl+Shift+X)
Rechercher "Live Sass Compiler" (Par Glenn Marks)
Cliquer sur Installer

Utilisation de Live Sass Compiler

Une fois l'extension installée :

Créez un fichier avec l'extension .scss (exemple : styles.scss)
Dans la barre d'état en bas de VS Code, cliquez sur "Watch Sass"
L'extension génère automatiquement un fichier .css correspondant
Chaque modification du fichier SCSS recompile automatiquement le CSS

alt text

Structure des fichiers

mon-projet/
├── index.html
├── styles/styles.scss   ← Dossier pour les fichiers SCSS/CSS
├── styles/styles.css    ← Fichier CSS généré automatiquement
└── styles/styles.css.map ← Fichier de mappage pour le débogage

Lier le CSS à votre HTML

Dans votre fichier HTML, liez toujours le fichier CSS compilé (et non le fichier SCSS) :

html

<!DOCTYPE html>
<html lang="fr">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Ma Page</title>
    <!-- Lier le fichier CSS compilé, pas le SCSS -->
    <link rel="stylesheet" href="styles/styles.css">
</head>
<body>
    <!-- Contenu -->
</body>
</html>

Points importants

ATTENTION

Ne modifiez jamais le fichier styles.css directement

Pourquoi ? Parce qu'il sera écrasé à chaque compilation du fichier SCSS. automatiquement le fichier styles.css

Travaillez uniquement dans le fichier SCSS
- Workflow correct : Modifiez uniquement le fichier styles.scss → Watch Sass → compile et créer automatiquement le fichier styles.css
Gardez Watch Sass actif pendant le développement : l'extension VS Code doit être en cours d'exécution (Watching...)
Le fichier .css.map aide au débogage dans les outils de développement

3 : Les variables en SCSS

Définition

Les variables SCSS permettent de stocker des valeurs réutilisables comme des couleurs, des tailles de police, des espacements, etc. Elles commencent par le symbole $.

Syntaxe

Voir le code

This is some introductory text inside the collapsible section.

scss

// Déclaration de variables
$couleur-primaire: #3498db;
$couleur-secondaire: #2ecc71;
$couleur-texte: #333333;
$taille-police-base: 16px;
$espacement: 20px;
$police-principale: 'Arial', sans-serif;

// Utilisation des variables
body {
    font-family: $police-principale;
    font-size: $taille-police-base;
    color: $couleur-texte;
}

.bouton {
    background-color: $couleur-primaire;
    padding: $espacement;
}

.bouton-succes {
    background-color: $couleur-secondaire;
}

CSS généré

css

body {
    font-family: 'Arial', sans-serif;
    font-size: 16px;
    color: #333333;
}

.bouton {
    background-color: #3498db;
    padding: 20px;
}

.bouton-succes {
    background-color: #2ecc71;
}

Types de valeurs pour les variables

Type	Exemple
Couleurs	`$rouge: #e74c3c;` ou `$bleu: rgb(52, 152, 219);`
Tailles	`$taille: 16px;` ou `$largeur: 100%;`
Polices	`$police: 'Roboto', sans-serif;`
Nombres	`$colonnes: 12;`
Chaînes	`$chemin: '../images/';`
Listes	`$marges: 10px 20px 30px 40px;`

Bonnes pratiques pour les variables

scss

// ✅ Bonne pratique : noms descriptifs
$couleur-primaire: #3498db;
$couleur-erreur: #e74c3c;
$espacement-grand: 40px;
$espacement-moyen: 20px;
$espacement-petit: 10px;

// ❌ À éviter : noms non descriptifs
$bleu: #3498db;
$a: 40px;
$x: 20px;

Points importants

Les variables doivent être déclarées avant leur utilisation
Utilisez des noms descriptifs et cohérents
Regroupez vos variables en début de fichier ou dans un fichier dédié
Les variables facilitent le changement de thème (changer une valeur = changer partout)

4 : L'imbrication (Nesting)

Définition

L'imbrication permet d'écrire des sélecteurs CSS de manière hiérarchique, reflétant la structure HTML. Cela rend le code plus lisible et mieux organisé. On utilise les accolades {} pour imbriquer les règles à l'intérieur d'autres règles.

Exemple simple : Une liste à puce avec des liens imbriqués dans des éléments <li>

html

<ul class="liste">
    <li><a href="#">Lien1</a></li>
    <li><a href="#">Lien2</a></li>
    <li><a href="#">Lien3</a></li>
</ul>

En CSS classique, on écrirait quelque chose comme ceci :

css

.liste {
    list-style: none;
    padding: 0;
}

.liste li {
    margin-bottom: 10px;
}
.liste li a {
    color: blue;
    text-decoration: none;
}

Avec l'imbrication SCSS, on peut réécrire cela de manière plus organisée :

scss

.liste {
    list-style: none;
    padding: 0;

    li {
        margin-bottom: 10px;

        a {
            color: blue;
            text-decoration: none;
        }
    }
}

Au final, le CSS généré sera identique, mais le code SCSS en amont est plus clair et reflète mieux la structure HTML. Cela facilite la maintenance et la compréhension du code et standardise les styles liés. Pour la maintenance du code, au lieu de devoir rechercher toutes les règles débutant par .liste ..., on peut se concentrer sur une 1 section imbriquée sachant que tout ce qui concerne la liste en question est regroupé sous .liste { ... }.

Avantages :

Meilleure lisibilité
Organisation logique
Réduction de la répétition
Réduit les erreurs de sélecteurs
Favorise une structure hiérarchique claire

Syntaxe

Voir le code

scss

// SCSS avec imbrication
nav {
    background-color: #333;
    padding: 10px;
    
    ul {
        list-style: none;
        margin: 0;
        padding: 0;
        
        li {
            display: inline-block;
            margin-right: 15px;
            
            a {
                color: white;
                text-decoration: none;
                
                &:hover {
                    color: #3498db;
                    text-decoration: underline;
                }
            }
        }
    }
}

CSS généré

Lorsque l'extension (Live Sass Compiler) compile le SCSS ci-dessus, elle génère le CSS suivant. 5 règles CSS distinctes sont créées, chacune correspondant à un niveau d'imbrication dans le SCSS.

css

nav {
    background-color: #333;
    padding: 10px;
}
nav ul {
    list-style: none;
    margin: 0;
    padding: 0;
}
nav ul li {
    display: inline-block;
    margin-right: 15px;
}
nav ul li a {
    color: white;
    text-decoration: none;
}
nav ul li a:hover {
    color: #3498db;
    text-decoration: underline;
}

Le sélecteur parent `&` pour les pseudo-classes (:hover, :active, :focus, etc.)

Le symbole & représente le sélecteur parent. Il est très utile pour les pseudo-classes, pseudo-éléments et modificateurs de classe.

Par exemple, soit le code CSS suivant qui utilise la pseudo-classe :hover :

css

.bouton {
    background-color: blue;
    color: white;
}
.bouton:hover {
    background-color: darkblue;
}

Dans cet exemple, le style cible le comportement au survol (:hover) de l'élément avec la classe .bouton.

En SCSS, la bonne façon de coder ceci est la suivante :

scss

.bouton {
    /* 1er niveau d'imbrication */
    background-color: blue;
    color: white;
    
    /* 2e niveau d'imbrication avec le sélecteur parent & */
    &:hover {
        background-color: darkblue;
    }
}

Bonnes pratiques pour l'imbrication

scss

// ✅ Bonne pratique : imbrication limitée (3-4 niveaux max)
.carte {
    .carte-header {
        h2 { }
    }
    .carte-body {
        p { }
    }
}

// ❌ À éviter : imbrication trop profonde
.page {
    .container {
        .section {
            .article {
                .contenu {
                    .paragraphe {
                        span { } // Trop profond!
                    }
                }
            }
        }
    }
}

Points importants

Limitez l'imbrication à 3-4 niveaux maximum
Utilisez & pour les pseudo-classes et pseudo-éléments
L'imbrication doit refléter la structure logique, pas forcément la structure HTML exacte
Une imbrication trop profonde génère des sélecteurs CSS trop spécifiques

5 : Réutilisation avec @extend

Définition

La directive @extend permet à un sélecteur d'hériter des styles d'un autre sélecteur. C'est idéal pour partager des styles communs entre plusieurs éléments. Hériter veut dire "prendre les mêmes propriétés et valeurs CSS" d'un classe parente.

Exemple :

Dans cet exemple, nous allons créer une classe de base .message avec des styles communs, puis utiliser @extend pour créer des variantes spécifiques comme .message-succes, .message-erreur et .message-info. Donc, à chaque fois que l'on souhaite créer un nouveau type de message, on n'a pas besoin de réécrire les styles communs, on les hérite simplement avec @extend. On peut se concentrer que sur les styles spécifiques à chaque type de message.

Voir le code

styles.scss

scss

// Classe de base : servira de modèle pour les autres
.message {
    padding: 15px;
    border: 1px solid #ccc;
    border-radius: 5px;
    margin-bottom: 10px;
}

// Classe spécifique au message de succès : elle hérite des styles de .message et ajoute ses propres styles
.message-succes {
    @extend .message;
    background-color: #d4edda;
    border-color: #28a745;
    color: #155724;
}

// Classe spécifique au message d'erreur : elle hérite des styles de .message et ajoute ses propres styles
.message-erreur {
    @extend .message;
    background-color: #f8d7da;
    border-color: #dc3545;
    color: #721c24;
}

// Classe spécifique au message d'information : elle hérite des styles de .message et ajoute ses propres styles
.message-info {
    @extend .message;
    background-color: #d1ecf1;
    border-color: #17a2b8;
    color: #0c5460;
}

styles.css généré

Notez que la première règle CSS regroupe les styles communs de .message qui sont partagés entre les trois variantes, évitant ainsi la duplication de code.

css

.message, .message-succes, .message-erreur, .message-info {
    padding: 15px;
    border: 1px solid #ccc;
    border-radius: 5px;
    margin-bottom: 10px;
}

.message-succes {
    background-color: #d4edda;
    border-color: #28a745;
    color: #155724;
}

.message-erreur {
    background-color: #f8d7da;
    border-color: #dc3545;
    color: #721c24;
}

.message-info {
    background-color: #d1ecf1;
    border-color: #17a2b8;
    color: #0c5460;
}

Points importants

Utilisez @extend pour partager des styles communs
@extend ne duplique pas le code, il regroupe les sélecteurs
Évitez d'étendre des sélecteurs imbriqués trop complexes

Fonctions SCSS courantes (optionnel, mais utile)

SCSS fournit plusieurs fonctions intégrées pour manipuler les couleurs et les valeurs. Voici les trois plus importantes :

1. darken($couleur, $pourcentage)

Assombrit une couleur d'un pourcentage donné.

Syntaxe :

scss

darken($couleur, $pourcentage)

Exemple :

scss

$couleur-primaire: #3498db;
.bouton {
    background-color: $couleur-primaire;
    
    &:hover {
        background-color: darken($couleur-primaire, 10%);
    }
}

Utilité : Permet de créer des variantes plus sombres d'une couleur sans définir de nouvelles variables, idéal pour les effets de survol.

2. lighten($couleur, $pourcentage)

Éclaircit une couleur d'un pourcentage donné.

Syntaxe :

scss

lighten($couleur, $pourcentage)

Exemple :

scss

$couleur-texte: #333;
.message-info {
    background-color: lighten($couleur-texte, 40%);
    color: darken($couleur-texte, 20%);
}

Utilité : Génère des tons plus clairs pour les arrière-plans ou les états inactifs, facilitant la création de hiérarchies visuelles.

3. rgba($couleur, $alpha)

Ajoute une transparence à une couleur.

Syntaxe :

scss

rgba($couleur, $alpha)

Exemple :

scss

$couleur-primaire: #3498db;
.overlay {
    background-color: rgba($couleur-primaire, 0.8);
}

Utilité : Crée des éléments semi-transparents comme les overlays, les ombres, ou les arrière-plans sans modifier la couleur de base.

Démonstration

Démo 1 : Page complète avec SCSS

Objectif

Créer une page web complète en utilisant toutes les fonctionnalités SCSS apprises : variables, imbrication et @extend.

Structure du projet Vs code :

mon-projet/
├── index.html
├── styles/
│   ├── styles.scss (C'est ici qu'on code nos styles SCSS)
│   ├── styles.css (Ne pas créer : sera généré automatiquement)
│   └── styles.css.map (Ne pas créer : sera généré automatiquement)

index.html

Voir le code

html

<!DOCTYPE html>
<html lang="fr">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Démo SCSS - Module 2</title>
    <link rel="stylesheet" href="styles/styles.css">
</head>
<body>
    <header class="header">
        <h1>Démonstration SCSS</h1>
        <nav class="nav">
            <ul>
                <li><a href="#">Accueil</a></li>
                <li><a href="#">Services</a></li>
                <li><a href="#">Portfolio</a></li>
                <li><a href="#">Contact</a></li>
            </ul>
        </nav>
    </header>
    
    <main class="main">
        <section class="hero">
            <h2>Bienvenue sur notre site</h2>
            <p>Découvrez la puissance de SCSS pour créer des styles maintenables.</p>
            <a href="#" class="bouton-primaire">En savoir plus</a>
            <a href="#" class="bouton-secondaire">Nous contacter</a>
        </section>
        
        <section class="messages">
            <div class="message-succes">Opération réussie !</div>
            <div class="message-erreur">Une erreur est survenue.</div>
            <div class="message-info">Information importante à lire.</div>
        </section>
    </main>
    
    <footer class="footer">
        <p>&copy; 2025 - Démonstration SCSS</p>
    </footer>
</body>
</html>

styles.scss

Voir le code

scss

// ============================
// VARIABLES
// ============================
$couleur-primaire: #3498db;
$couleur-secondaire: #2ecc71;
$couleur-danger: #e74c3c;
$couleur-info: #17a2b8;
$couleur-texte: #333;
$couleur-texte-clair: #fff;
$couleur-fond: #f4f4f4;

$police-principale: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
$taille-police-base: 16px;

$espacement-petit: 10px;
$espacement-moyen: 20px;
$espacement-grand: 40px;

$rayon-bordure: 5px;
$transition-duree: 0.3s;

// ============================
// CLASSES DE BASE
// ============================
.bouton-base {
    display: inline-block;
    padding: $espacement-petit $espacement-moyen;
    border: none;
    border-radius: $rayon-bordure;
    cursor: pointer;
    font-size: $taille-police-base;
    text-decoration: none;
    transition: all $transition-duree ease;
    margin-right: $espacement-petit;
}

.message-base {
    padding: $espacement-moyen;
    border-radius: $rayon-bordure;
    margin-bottom: $espacement-petit;
    border: 1px solid transparent;
}

// ============================
// STYLES GLOBAUX
// ============================
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: $police-principale;
    font-size: $taille-police-base;
    color: $couleur-texte;
    line-height: 1.6;
    background-color: $couleur-fond;
}

// ============================
// HEADER avec imbrication
// ============================
.header {
    background-color: $couleur-primaire;
    color: $couleur-texte-clair;
    padding: $espacement-moyen;
    
    h1 {
        margin-bottom: $espacement-petit;
    }
    
    .nav {
        ul {
            list-style: none;
            display: flex;
            gap: $espacement-moyen;
            
            li {
                a {
                    color: $couleur-texte-clair;
                    text-decoration: none;
                    padding: $espacement-petit;
                    border-radius: $rayon-bordure;
                    transition: background-color $transition-duree;
                    
                    &:hover {
                        background-color: rgba(255, 255, 255, 0.2);
                    }
                }
            }
        }
    }
}

// ============================
// MAIN
// ============================
.main {
    max-width: 1200px;
    margin: 0 auto;
    padding: $espacement-grand;
}

.hero {
    text-align: center;
    padding: $espacement-grand;
    background-color: $couleur-texte-clair;
    border-radius: $rayon-bordure;
    margin-bottom: $espacement-grand;
    
    h2 {
        color: $couleur-primaire;
        margin-bottom: $espacement-moyen;
    }
    
    p {
        margin-bottom: $espacement-moyen;
        color: lighten($couleur-texte, 20%);
    }
}

// ============================
// BOUTONS avec @extend
// ============================
.bouton-primaire {
    @extend .bouton-base;
    background-color: $couleur-primaire;
    color: $couleur-texte-clair;
    
    &:hover {
        background-color: darken($couleur-primaire, 10%);
        transform: translateY(-2px);
    }
}

.bouton-secondaire {
    @extend .bouton-base;
    background-color: $couleur-secondaire;
    color: $couleur-texte-clair;
    
    &:hover {
        background-color: darken($couleur-secondaire, 10%);
        transform: translateY(-2px);
    }
}

// ============================
// MESSAGES avec @extend
// ============================
.messages {
    margin-top: $espacement-grand;
}

.message-succes {
    @extend .message-base;
    background-color: lighten($couleur-secondaire, 40%);
    border-color: $couleur-secondaire;
    color: darken($couleur-secondaire, 20%);
}

.message-erreur {
    @extend .message-base;
    background-color: lighten($couleur-danger, 35%);
    border-color: $couleur-danger;
    color: darken($couleur-danger, 10%);
}

.message-info {
    @extend .message-base;
    background-color: lighten($couleur-info, 45%);
    border-color: $couleur-info;
    color: darken($couleur-info, 15%);
}

// ============================
// FOOTER
// ============================
.footer {
    background-color: $couleur-texte;
    color: $couleur-texte-clair;
    text-align: center;
    padding: $espacement-moyen;
    margin-top: $espacement-grand;
}

Ce que cette démonstration illustre

Une page web complète avec un header coloré, une section hero avec des boutons stylisés, des messages d'alerte de différents types, et un footer.

Tous les styles sont codés dans le fichier styles.scss
Le fichier styles.css est généré automatiquement par l'extention Watch Sass, qui doit être activée. Elle est alors "à l'écoute" des modifications du fichier styles.scss et génère automatiquement le fichier styles.css à chaque sauvegarde.
Le fichier index.html lie le fichier styles.css généré ET NON le fichier styles.scss.

Faite le test :

Assurez-vous d'avoir téléchargé le plugin Live Sass Compiler dans VS Code ET de l'avoir activé en cliquant sur "Watch Sass" en bas à droite de barre la d'état
Téléchargez le dossier de la démo et ouvrez-le dans VS Code (il doit être chargé comme un projet)
Ouvrez le fichier styles/styles.scss et assurez-vous que l'extension Watch Sass est bien activée (en bas à droite de la barre d'état, vous devez voir "Watching...")
Faites des modifications dans styles.scss (par exemple, changez une couleur ou un espacement, ajouter une nouvelle règle) et sauvegardez (Ctrl+S).
Ouvrez le fichier styles/styles.css pour voir que vos changements sont compilés automatiquement.
Ouvrez le fichier index.html dans un navigateur pour voir le rendu final avec les styles appliqués.

Exercices pratiques

Exercice 1 : Créer une palette de couleurs (Facile)

Avant de commencer

Assurez-vous que l'extension Watch Sass est installée ET activée dans VS Code pour compiler automatiquement vos fichiers SCSS en CSS.

Énoncé

Créez une page présentant une palette de couleurs d'entreprise en utilisant les variables SCSS.

Fichiers à créer

index.html
styles.scss

Consignes

Définir au moins 5 variables de couleurs (primaire, secondaire, accent, texte, fond)
Définir des variables pour les espacements (petit, moyen, grand)
Créer une page avec 5 boîtes colorées affichant chaque couleur
Chaque boîte doit afficher le nom de la couleur et son code hexadécimal
Utiliser les variables pour tous les styles

Il n'y à pas de @extend à réaliser dans cet exercice, seulement l'utilisation de variables SCSS.

Exemple de structure HTML (elle veut varier selon votre design ou vos choix)

html

<div class="palette">
    <div class="couleur couleur-primaire">
        <span>Primaire</span>
        <span>#3498db</span>
    </div>
    <!-- Autres couleurs -->
</div>

Énoncé

Créez un menu de navigation horizontal en utilisant l'imbrication SCSS.

Fichiers à créer

index.html
styles.scss

Consignes

Créer un menu horizontal avec au moins 4 éléments
Utiliser l'imbrication SCSS pour structurer le code (max 3 niveaux)
Implémenter les états :hover avec le sélecteur &

Il n'y à pas de @extend à réaliser dans cet exercice, seulement l'utilisation de l'imbrication SCSS.

Structure attendue

html

<nav class="menu-principal">
    <ul>
        <li><a href="#">Accueil</a></li>
        <li><a href="#">Services</a></li>
        <li><a href="#">Produits</a></li>
        <li><a href="#">À propos</a></li>
        <li><a href="#">Contact</a></li>
    </ul>
</nav>

Exercice 3 : Système de cartes avec @extend (Avancé)

Énoncé

Créez un système de cartes (cards) réutilisable avec différentes variantes en utilisant @extend et les placeholders.

Fichiers à créer

index.html
styles.scss

Consignes

Créer une classe .carte-base avec les styles communs
Créer au moins 4 variantes de cartes : standard, featured, pricing, témoignage
Chaque variante doit avoir des caractéristiques visuelles distinctes
Utiliser des variables pour toutes les couleurs et espacements
Combiner l'imbrication et @extend pour un code optimal

Variantes à créer

Carte standard : bordure simple, fond blanc
Carte featured : bordure colorée, badge "Populaire"
Carte pricing : centrée, avec prix mis en évidence
Carte témoignage : avec photo ronde et citation stylisée

Correction

Correction Exercice 1

Solution HTML

Voir le code

html

<!DOCTYPE html>
<html lang="fr">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Palette de couleurs</title>
    <link rel="stylesheet" href="styles/styles.css">
</head>
<body>
    <h1>Palette de couleurs d'entreprise</h1>
    <div class="palette">
        <div class="couleur couleur-primaire">
            <span class="nom">Primaire</span>
            <span class="code">#3498db</span>
        </div>
        <div class="couleur couleur-secondaire">
            <span class="nom">Secondaire</span>
            <span class="code">#2ecc71</span>
        </div>
        <div class="couleur couleur-accent">
            <span class="nom">Accent</span>
            <span class="code">#e74c3c</span>
        </div>
        <div class="couleur couleur-texte">
            <span class="nom">Texte</span>
            <span class="code">#2c3e50</span>
        </div>
        <div class="couleur couleur-fond">
            <span class="nom">Fond</span>
            <span class="code">#ecf0f1</span>
        </div>
    </div>
</body>
</html>

Solution SCSS

Voir le code

scss

// Variables de couleurs
$couleur-primaire: #3498db;
$couleur-secondaire: #2ecc71;
$couleur-accent: #e74c3c;
$couleur-texte: #2c3e50;
$couleur-fond: #ecf0f1;

// Variables d'espacement
$espacement-petit: 10px;
$espacement-moyen: 20px;
$espacement-grand: 40px;

// Styles globaux
body {
    font-family: 'Segoe UI', sans-serif;
    background-color: $couleur-fond;
    padding: $espacement-grand;
}

h1 {
    text-align: center;
    color: $couleur-texte;
    margin-bottom: $espacement-grand;
}

.palette {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: $espacement-moyen;
}

.couleur {
    width: 180px;
    height: 180px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    border-radius: 10px;
    color: white;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    
    .nom {
        font-size: 1.2em;
        font-weight: bold;
        margin-bottom: $espacement-petit;
    }
    
    .code {
        font-family: monospace;
        background-color: rgba(255, 255, 255, 0.2);
        padding: 5px 10px;
        border-radius: 4px;
    }
}

.couleur-primaire {
    background-color: $couleur-primaire;
}

.couleur-secondaire {
    background-color: $couleur-secondaire;
}

.couleur-accent {
    background-color: $couleur-accent;
}

.couleur-texte {
    background-color: $couleur-texte;
}

.couleur-fond {
    background-color: darken($couleur-fond, 20%);
    color: $couleur-texte;
}

Explications

Cette solution utilise les variables SCSS pour centraliser toutes les valeurs de couleurs et d'espacement. L'imbrication est utilisée pour les éléments .nom et .code à l'intérieur de .couleur. La fonction darken() est utilisée pour assombrir la couleur de fond claire afin qu'elle reste visible.

Correction Exercice 2

Solution complète

Voir le code

index.html

html

<!DOCTYPE html>
<html lang="fr">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Menu de navigation</title>
    <link rel="stylesheet" href="styles/styles.css">
</head>
<body>
    <nav class="menu-principal">
        <ul>
            <li><a href="#">Accueil</a></li>
            <li><a href="#">Services</a></li>
            <li><a href="#">Produits</a></li>
            <li><a href="#">À propos</a></li>
            <li><a href="#">Contact</a></li>
        </ul>
    </nav>
</body>
</html>

styles.scss

scss

// Variables
$couleur-menu: #2c3e50;
$couleur-hover: #3498db;
$couleur-texte: #fff;
$transition: 0.3s ease;

// Reset
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: 'Segoe UI', sans-serif;
    padding-top: 80px;
}

// Menu principal avec imbrication (sans sous-menu)
.menu-principal {
    background-color: $couleur-menu;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1000;
    
    ul {
        list-style: none;
        display: flex;
        justify-content: center;
        
        li {
            a {
                display: block;
                color: $couleur-texte;
                text-decoration: none;
                padding: 20px 25px;
                transition: background-color $transition;
                
                &:hover {
                    background-color: $couleur-hover;
                }
            }
        }
    }
}

Points de discussion

L'imbrication SCSS reflète la structure HTML du menu principal
Le sélecteur & est utilisé pour les pseudo-classes :hover
Les transitions créent des animations fluides
Aucun sous-menu n'est présent dans cette version

Correction Exercice 3

Solution

Voir le code

index.html

html

<!DOCTYPE html>
<html lang="fr">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Système de cartes</title>
    <link rel="stylesheet" href="styles/styles.css">
</head>
<body>
    <h1>Nos offres</h1>
    <div class="grille-cartes">
        <div class="carte-standard">
            <h3>Basique</h3>
            <p>Parfait pour débuter avec les fonctionnalités essentielles.</p>
            <a href="#" class="bouton">Choisir</a>
        </div>
        
        <div class="carte-featured">
            <span class="badge">Populaire</span>
            <h3>Pro</h3>
            <p>Idéal pour les professionnels qui veulent plus de fonctionnalités.</p>
            <a href="#" class="bouton">Choisir</a>
        </div>
        
        <div class="carte-pricing">
            <h3>Enterprise</h3>
            <div class="prix">99€<span>/mois</span></div>
            <ul>
                <li>Fonctionnalités illimitées</li>
                <li>Support prioritaire</li>
                <li>API complète</li>
            </ul>
            <a href="#" class="bouton">Choisir</a>
        </div>
        
        <div class="carte-temoignage">
            <img src="https://via.placeholder.com/80" alt="Photo" class="avatar">
            <blockquote>"Service exceptionnel, je recommande vivement !"</blockquote>
            <cite>- Marie Dupont, CEO</cite>
        </div>
    </div>
</body>
</html>

styles.scss

scss

// Variables
$couleur-primaire: #3498db;
$couleur-secondaire: #2ecc71;
$couleur-accent: #e74c3c;
$couleur-texte: #333;
$couleur-fond-carte: #fff;
$couleur-bordure: #ddd;

$espacement-petit: 10px;
$espacement-moyen: 20px;
$espacement-grand: 30px;

$rayon-bordure: 8px;
$ombre-carte: 0 4px 15px rgba(0, 0, 0, 0.1);
$transition: 0.3s ease;

// Classe de base pour toutes les cartes
.carte-base {
    background-color: $couleur-fond-carte;
    border-radius: $rayon-bordure;
    padding: $espacement-grand;
    box-shadow: $ombre-carte;
    transition: transform $transition, box-shadow $transition;
    
    &:hover {
        transform: translateY(-5px);
        box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
    }
    
    h3 {
        margin-bottom: $espacement-moyen;
        color: $couleur-texte;
    }
    
    p {
        color: lighten($couleur-texte, 20%);
        margin-bottom: $espacement-moyen;
    }
    
    .bouton {
        display: inline-block;
        padding: $espacement-petit $espacement-moyen;
        background-color: $couleur-primaire;
        color: white;
        text-decoration: none;
        border-radius: 4px;
        transition: background-color $transition;
        
        &:hover {
            background-color: darken($couleur-primaire, 10%);
        }
    }
}

// Styles globaux
body {
    font-family: 'Segoe UI', sans-serif;
    background-color: #f5f5f5;
    padding: $espacement-grand;
}

h1 {
    text-align: center;
    margin-bottom: $espacement-grand;
}

.grille-cartes {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: $espacement-grand;
    max-width: 1200px;
    margin: 0 auto;
}

// Carte standard
.carte-standard {
    @extend .carte-base;
    border: 1px solid $couleur-bordure;
}

// Carte featured avec badge
.carte-featured {
    @extend .carte-base;
    border: 2px solid $couleur-primaire;
    position: relative;
    
    .badge {
        position: absolute;
        top: -12px;
        right: 20px;
        background-color: $couleur-accent;
        color: white;
        padding: 5px 15px;
        border-radius: 20px;
        font-size: 0.85em;
        font-weight: bold;
    }
}

// Carte pricing
.carte-pricing {
    @extend .carte-base;
    text-align: center;
    border: 1px solid $couleur-bordure;
    
    .prix {
        font-size: 2.5em;
        font-weight: bold;
        color: $couleur-primaire;
        margin-bottom: $espacement-moyen;
        
        span {
            font-size: 0.4em;
            color: lighten($couleur-texte, 30%);
        }
    }
    
    ul {
        list-style: none;
        margin-bottom: $espacement-moyen;
        
        li {
            padding: $espacement-petit 0;
            border-bottom: 1px solid lighten($couleur-bordure, 5%);
            
            &:last-child {
                border-bottom: none;
            }
        }
    }
}

// Carte témoignage
.carte-temoignage {
    @extend .carte-base;
    text-align: center;
    border-left: 4px solid $couleur-secondaire;
    
    .avatar {
        width: 80px;
        height: 80px;
        border-radius: 50%;
        margin-bottom: $espacement-moyen;
        border: 3px solid $couleur-secondaire;
    }
    
    blockquote {
        font-style: italic;
        color: $couleur-texte;
        margin-bottom: $espacement-moyen;
        font-size: 1.1em;
        
        &::before { /* Before est un sélecteur avancé que nous allons voir plus en détail dans un prochain module */
            content: '"';
            font-size: 2em;
            color: $couleur-secondaire;
        }
    }
    
    cite {
        color: lighten($couleur-texte, 30%);
        font-style: normal;
    }
}

Vérifications des connaissances

Testez vos connaissances acquises dans ce cours en répondant aux questions suivantes. Cliquez sur chaque question pour révéler la réponse.

Question 1

Qu'est-ce qu'un préprocesseur CSS et pourquoi l'utiliser ?

Réponse :

Un préprocesseur CSS est un outil qui étend les fonctionnalités du CSS standard.
Il permet d'écrire du code dans un langage amélioré (comme SCSS) qui est ensuite compilé en CSS.
Avantages : variables, imbrication, réutilisation de code, meilleure organisation et maintenance.

Question 2

Comment installe-t-on et utilise-t-on l'extension Watch Sass dans VS Code ?

Réponse :

Ouvrir l'onglet Extensions dans VS Code (Ctrl+Shift+X)
Rechercher "Watch Sass" et l'installer
Créer un fichier .scss
Cliquer sur "Watch Sass" dans la barre d'état en bas
L'extension compile automatiquement le SCSS en CSS à chaque sauvegarde

Question 3

Comment déclare-t-on et utilise-t-on une variable en SCSS ?

Réponse :

On déclare une variable avec le symbole $ suivi du nom : $couleur-primaire: #3498db;
On l'utilise en la référençant par son nom : background-color: $couleur-primaire;
Les variables doivent être déclarées avant leur utilisation.

Question 4

Quels types de valeurs peut-on stocker dans une variable SCSS ?

Réponse :

Couleurs : $rouge: #e74c3c;
Tailles : $taille: 16px;
Polices : $police: 'Arial', sans-serif;
Nombres : $colonnes: 12;
Chaînes : $chemin: '../images/';
Listes : $marges: 10px 20px 30px;

Question 5

Qu'est-ce que l'imbrication (nesting) en SCSS et quel est son avantage ?

Réponse :

L'imbrication permet d'écrire des sélecteurs CSS de manière hiérarchique, en reflétant la structure HTML.
Avantages : code plus lisible, mieux organisé, et qui montre clairement les relations parent-enfant.
Attention : limiter à 3-4 niveaux maximum pour éviter des sélecteurs trop spécifiques.

Question 6

À quoi sert le sélecteur parent & en SCSS ?

Réponse :

Le & représente le sélecteur parent dans l'imbrication.
Utilisations :

Pseudo-classes : &:hover, &:focus
Modificateurs : &.active, &.grand
Suffixes de classe : &-icone génère .parent-icone

Question 7

Réponse :

@extend ne duplique pas le code CSS.
Il regroupe les sélecteurs qui partagent les mêmes styles.
Exemple : .btn, .btn-primary, .btn-secondary { padding: 10px; }
Cela réduit la taille du fichier CSS final.

Question 8

À quoi sert le fichier .css.map généré par le compilateur SCSS ?

Réponse :

C'est un fichier de mapping (source map).
Il permet aux outils de développement du navigateur de faire le lien entre le CSS compilé et le code SCSS source.
Utile pour le débogage : on voit les numéros de ligne SCSS dans les DevTools.

Question 9

Quelles sont les bonnes pratiques pour nommer les variables SCSS ?

Réponse :

Utiliser des noms descriptifs : $couleur-primaire au lieu de $bleu
Utiliser des tirets pour séparer les mots : $espacement-grand
Regrouper les variables par catégorie (couleurs, espacements, polices)
Placer les variables en début de fichier ou dans un fichier dédié

Question 10

Pourquoi ne faut-il jamais modifier directement le fichier CSS généré ?

Réponse :

Le fichier CSS est régénéré automatiquement à chaque compilation du SCSS.
Toutes les modifications manuelles seront écrasées.
On doit travailler uniquement dans le fichier SCSS.

Question 11

Comment créer une variante de bouton qui hérite des styles de base avec @extend ?

Réponse :

scss

.bouton-base {
    padding: 10px 20px;
    border: none;
    border-radius: 4px;
}

.bouton-primaire {
    @extend .bouton-base;
    background-color: blue;
    color: white;
}

.bouton-secondaire {
    @extend .bouton-base;
    background-color: gray;
    color: white;
}

CSS généré :

css

.bouton-base, .bouton-primaire, .bouton-secondaire {
    padding: 10px 20px;
    border: none;
    border-radius: 4px;
}

.bouton-primaire {
    background-color: blue;
    color: white;
}

.bouton-secondaire {
    background-color: gray;
    color: white;
}

Note : Avec une classe normale, .bouton-base apparaît dans le CSS final et peut être utilisée directement dans le HTML si nécessaire.

Module 2 : SCSS - Préprocesseur CSS ​

Introduction ​

Objectifs du cours ​

Théorie ​

1 : Qu'est-ce qu'un préprocesseur CSS ? ​

Définition ​

Avantages des préprocesseurs CSS ​

À retenir : ​

2 : Compiler du SCSS en CSS avec l'extension Live Sass Compiler ​

Définition ​

Installation de l'extension Live Sass Compiler ​

Utilisation de Live Sass Compiler ​

Structure des fichiers ​

Lier le CSS à votre HTML ​

Points importants ​

3 : Les variables en SCSS ​

Définition ​

Syntaxe ​

CSS généré ​

Types de valeurs pour les variables ​

Bonnes pratiques pour les variables ​

Points importants ​

4 : L'imbrication (Nesting) ​

Définition ​

Syntaxe ​

CSS généré ​

Le sélecteur parent & pour les pseudo-classes (:hover, :active, :focus, etc.) ​

Bonnes pratiques pour l'imbrication ​

Points importants ​

5 : Réutilisation avec @extend ​

Définition ​

Exemple : ​

styles.scss ​

styles.css généré ​

Points importants ​

Fonctions SCSS courantes (optionnel, mais utile) ​

1. darken($couleur, $pourcentage) ​

2. lighten($couleur, $pourcentage) ​

3. rgba($couleur, $alpha) ​

Démonstration ​

Démo 1 : Page complète avec SCSS ​

Objectif ​

index.html ​

styles.scss ​

Ce que cette démonstration illustre ​

Exercices pratiques ​

Exercice 1 : Créer une palette de couleurs (Facile) ​

Énoncé ​

Fichiers à créer ​

Consignes ​

Exemple de structure HTML (elle veut varier selon votre design ou vos choix) ​

Exercice 2 : Menu de navigation avec imbrication (Intermédiaire) ​

Énoncé ​

Fichiers à créer ​

Consignes ​

Structure attendue ​

Exercice 3 : Système de cartes avec @extend (Avancé) ​

Énoncé ​

Fichiers à créer ​

Consignes ​

Variantes à créer ​

Correction ​

Correction Exercice 1 ​

Solution HTML ​

Solution SCSS ​

Explications ​

Correction Exercice 2 ​

Solution complète ​

Points de discussion ​

Correction Exercice 3 ​

Solution ​

Vérifications des connaissances ​

Question 1 ​

Question 2 ​

Question 3 ​

Question 4 ​

Question 5 ​

Question 6 ​

Question 7 ​

Question 8 ​

Module 2 : SCSS - Préprocesseur CSS

Introduction

Objectifs du cours

Théorie

1 : Qu'est-ce qu'un préprocesseur CSS ?

Définition

Avantages des préprocesseurs CSS

À retenir :

2 : Compiler du SCSS en CSS avec l'extension Live Sass Compiler

Définition

Installation de l'extension Live Sass Compiler

Utilisation de Live Sass Compiler

Structure des fichiers

Lier le CSS à votre HTML

Points importants

3 : Les variables en SCSS

Définition

Syntaxe

CSS généré

Types de valeurs pour les variables

Bonnes pratiques pour les variables

Points importants

4 : L'imbrication (Nesting)

Définition

Syntaxe

CSS généré

Le sélecteur parent `&` pour les pseudo-classes (:hover, :active, :focus, etc.)

Bonnes pratiques pour l'imbrication

Points importants

5 : Réutilisation avec @extend

Définition

Exemple :

styles.scss

styles.css généré

Points importants

Fonctions SCSS courantes (optionnel, mais utile)

1. darken($couleur, $pourcentage)

2. lighten($couleur, $pourcentage)

3. rgba($couleur, $alpha)

Démonstration

Démo 1 : Page complète avec SCSS

Objectif

index.html

styles.scss

Ce que cette démonstration illustre

Exercices pratiques

Exercice 1 : Créer une palette de couleurs (Facile)

Énoncé

Fichiers à créer

Consignes

Exemple de structure HTML (elle veut varier selon votre design ou vos choix)

Exercice 2 : Menu de navigation avec imbrication (Intermédiaire)

Énoncé

Fichiers à créer

Consignes

Structure attendue

Exercice 3 : Système de cartes avec @extend (Avancé)

Énoncé

Fichiers à créer

Consignes

Variantes à créer

Correction

Correction Exercice 1

Solution HTML

Solution SCSS

Explications

Correction Exercice 2

Solution complète

Points de discussion

Correction Exercice 3

Solution

Vérifications des connaissances

Question 1

Question 2

Question 3

Question 4

Question 5

Question 6

Question 7

Question 8