Cours HTML et CSS · Module 7: SASS

Les variables dans Sass

5 min de lecture

Dans cette leçon5

La palette d'un temple compte une bonne dizaine de valeurs : l'or, le lapis-lazuli, la couleur du sable, deux polices et quelques espacements. Si tu saisis chacune d'elles à la main, tu perds la cohérence au premier changement, car il reste toujours quelque part une ancienne nuance. Les variables Sass donnent un nom à chaque valeur, comme le cartouche qui porte le nom du pharaon : tu l'écris une seule fois, puis tu l'invoques partout où il le faut. C'est un outil puissant qui facilite la maintenance du code et l'application des changements.

Définir des variables

Les variables dans Sass commencent par le signe dollar ($). Après le nom, tu places deux-points, la valeur et un point-virgule. On peut leur assigner différentes valeurs, telles que des couleurs, des longueurs, des pourcentages, des noms de polices, des valeurs booléennes, et bien plus encore. Voici trois exemples de déclarations :

1$main-color: #c06;
2$font-stack: Helvetica, sans-serif;
3$base-line-height: 1.5;

On a ici une couleur, une liste de polices et un nombre sans unité. Ces déclarations seules ne génèrent pas une seule ligne de CSS, car la variable n'existe que dans le fichier source. Bon à savoir : dans les noms de variables, Sass traite le tiret et le tiret bas de la même façon, donc $font-stack et $font_stack désignent la même variable. Je te recommande les tirets car c'est ainsi que l'on nomme les propriétés en CSS.

Utiliser des variables

Une fois la variable définie, tu places son nom partout où tu veux utiliser sa valeur, y compris à côté d'autres valeurs dans une même déclaration :

1body {
2  color: $main-color;
3  font: 100% $font-stack;
4  line-height: $base-line-height;
5}

Le compilateur remplacera chaque variable par sa valeur, tu verras donc color: #c06 dans le CSS, et le raccourci font recevra la valeur 100% Helvetica, sans-serif. Après compilation, la règle body ressemble exactement à ce que tu aurais obtenu en tapant ces valeurs à la main.

La portée des variables

Les variables dans Sass ont une portée, ce qui signifie qu'elles ne sont disponibles qu'à l'intérieur du bloc où elles ont été définies. Si tu définis une variable au niveau supérieur, en dehors de tout sélecteur ou règle, elle est globale et tu peux l'utiliser dans toute la feuille de style. En revanche, si tu définis une variable à l'intérieur d'une règle ou d'un sélecteur, elle ne sera disponible que dans ce bloc, comme un trésor enfermé dans une seule chambre :

1$global-color: blue;
2
3.foo {
4  $local-color: green;
5  color: $local-color;  // vert
6}
7
8.bar {
9  color: $local-color;  // erreur, $local-color n'est pas disponible ici
10}

La règle .foo recevra la couleur verte, mais au niveau de .bar la compilation se terminera par une erreur, car la variable $local-color n'existe pas en dehors du bloc .foo. La variable $global-color, elle, reste disponible dans les deux règles.

Sass permet aussi de réutiliser le même nom. Si, à l'intérieur d'un sélecteur, tu déclares une variable portant le nom d'une variable globale, tu crées une variable locale qui masque la globale uniquement dans ce bloc, et en dehors, la valeur globale ne change pas. L'indicateur !global permet d'écraser volontairement une variable globale depuis l'intérieur d'un bloc, mais utilise-le avec parcimonie.

Quand le compilateur signale une erreur

L'erreur de .bar est une excellente occasion d'apprendre à lire les messages du compilateur. Dart Sass indique précisément ce qui s'est passé, dans quel fichier et à quelle ligne :

1Error: Undefined variable.
2  ╷
39 │   color: $local-color;  // erreur, $local-color n'est pas disponible ici
4  │          ^^^^^^^^^^^^
5  ╵
6  styles.scss 9:10  root stylesheet

La première ligne décrit le problème, et la dernière indique le fichier, le numéro de ligne et la colonne. Avec un tel message, tu corriges n'importe quelle erreur en cinq étapes :

Lis le message d'erreur de compilation.
Trouve le fichier et le numéro de ligne indiqués.
Vérifie la syntaxe : un point-virgule manquant, une accolade ou une faute de frappe dans le nom d'une variable.
Corrige le code.
Compile de nouveau et vérifie le résultat dans le navigateur.

Pourquoi c'est important

Les variables dans Sass sont l'un des outils les plus importants pour maintenir un code CSS cohérent et facile à gérer. Grâce à elles, tu crées des feuilles de style plus dynamiques et configurables. Mon conseil : garde toutes les variables globales au début du fichier ou dans un fichier séparé, et dans la prochaine leçon, tu verras comment les extraire dans un partial et les charger avec la directive @use.

Dans le bac à sable ci-dessous, modifie la valeur d'une variable dans le fichier main.scss et observe combien d'endroits du CSS généré changent en même temps.

Souviens-toi : une variable est un cartouche, un seul nom et une seule valeur, que le compilateur inscrira partout où tu l'invoqueras.

Code de cette leçon : index.html

1<!DOCTYPE html>
2<html lang="en">
3<head>
4    <meta charset="UTF-8">
5    <meta name="viewport" content="width=device-width, initial-scale=1.0">
6    <title>SCSS - Projekt E-commerce</title>
7    <link rel="stylesheet" href="main.css">
8    <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;700&family=Poppins:wght@400;500;600;700&display=swap" rel="stylesheet">
9</head>
10<body>
11    <!-- Header -->
12    <header class="header">
13        <div class="header__top">
14            <div class="container">
15                <div class="header__top-info">
16                    <span>+48 123 456 789</span>
17                    <span>contact@shopmaster.pl</span>
18                </div>
19                <div class="header__top-links">
20                    <a href="#">À propos</a>
21                    <a href="#">Livraison</a>
22                    <a href="#">Aide</a>
23                </div>
24            </div>
25        </div>
26
27        <div class="header__main">
28            <div class="container">
29                <a href="#" class="header__logo">ShopMaster</a>
30
31                <div class="header__search">
32                    <input type="text" placeholder="Que cherches-tu ?">
33                    <button type="submit">Rechercher</button>
34                </div>
35
36                <div class="header__actions">
37                    <a href="#" class="header__actions-item">
38                        <span></span>
39                        <span>Compte</span>
40                    </a>
41                    <a href="#" class="header__actions-item">
42                        <span></span>
43                        <span>Favoris</span>
44                        <span class="badge">3</span>
45                    </a>
46                    <a href="#" class="header__actions-item">
47                        <span></span>
48                        <span>Panier</span>
49                        <span class="badge">5</span>
50                    </a>
51                </div>
52            </div>
53        </div>
54
55        <nav class="navigation">
56            <div class="container">
57                <ul class="navigation__menu">
58                    <li class="navigation__item">
59                        <a href="#" class="navigation__link">Électronique</a>
60                    </li>
61                    <li class="navigation__item">
62                        <a href="#" class="navigation__link">Mode</a>
63                    </li>
64                    <li class="navigation__item">
65                        <a href="#" class="navigation__link">Maison & Jardin</a>
66                    </li>
67                    <li class="navigation__item">
68                        <a href="#" class="navigation__link">Sport</a>
69                    </li>
70                    <li class="navigation__item navigation__item--sale">
71                        <a href="#" class="navigation__link">Soldes</a>
72                    </li>
73                </ul>
74            </div>
75        </nav>
76    </header>
77
78    <!-- Hero Section -->
79    <section class="hero">
80        <div class="hero__content">
81            <h1>Soldes d'hiver jusqu'à -70%</h1>
82            <p>Découvre les meilleures offres sur l'électronique, la mode et bien plus encore !</p>
83            <div class="btn-group">
84                <a href="#" class="btn btn--primary btn--large">Voir les offres</a>
85                <a href="#" class="btn btn--outline btn--large">En savoir plus</a>
86            </div>
87        </div>
88    </section>
89
90    <!-- Categories Section -->
91    <section class="categories section">
92        <div class="container">
93            <h2 class="section__title">Catégories populaires</h2>
94            <div class="categories__grid">
95                <a href="#" class="category-card">
96                    <div class="category-card__icon">◆</div>
97                    <h3 class="category-card__title">Électronique</h3>
98                    <p class="category-card__count">1234 produits</p>
99                </a>
100                <a href="#" class="category-card">
101                    <div class="category-card__icon">◆</div>
102                    <h3 class="category-card__title">Mode</h3>
103                    <p class="category-card__count">5678 produits</p>
104                </a>
105                <a href="#" class="category-card">
106                    <div class="category-card__icon">◆</div>
107                    <h3 class="category-card__title">Maison & Jardin</h3>
108                    <p class="category-card__count">910 produits</p>
109                </a>
110                <a href="#" class="category-card">
111                    <div class="category-card__icon">◆</div>
112                    <h3 class="category-card__title">Sport</h3>
113                    <p class="category-card__count">2345 produits</p>
114                </a>
115            </div>
116        </div>
117    </section>
118
119    <!-- Featured Products -->
120    <section class="products section">
121        <div class="container">
122            <div class="section__header">
123                <h2 class="section__title">Produits en vedette</h2>
124                <a href="#" class="btn btn--ghost">Voir tout →</a>
125            </div>
126
127            <div class="products__grid">
128                <!-- Product Card 1 -->
129                <div class="product-card">
130                    <div class="product-card__badge product-card__badge--sale">-30%</div>
131                    <div class="product-card__image">
132                        <img src="https://picsum.photos/300/300?random=10" alt="Product 1">
133                        <div class="product-card__overlay">
134                            <button class="btn btn--primary btn--small">Aperçu rapide</button>
135                            <button class="btn btn--outline btn--small">J'aime</button>
136                        </div>
137                    </div>
138                    <div class="product-card__content">
139                        <p class="product-card__category">Électronique</p>
140                        <h3 class="product-card__title">Smartphone XYZ Pro 128GB</h3>
141                        <div class="product-card__rating">
142                            <span class="product-card__rating-stars">5/5</span>
143                            <span class="product-card__rating-count">(125)</span>
144                        </div>
145                        <div class="product-card__price">
146                            <span class="product-card__price-current">$349</span>
147                            <span class="product-card__price-original">$499</span>
148                            <span class="product-card__price-discount">-30%</span>
149                        </div>
150                        <div class="product-card__actions">
151                            <button class="btn btn--primary">Ajouter au panier</button>
152                        </div>
153                    </div>
154                </div>
155
156                <!-- Product Card 2 -->
157                <div class="product-card">
158                    <div class="product-card__badge product-card__badge--new">Nouveau</div>
159                    <div class="product-card__image">
160                        <img src="https://picsum.photos/300/300?random=11" alt="Product 2">
161                        <div class="product-card__overlay">
162                            <button class="btn btn--primary btn--small">Aperçu rapide</button>
163                            <button class="btn btn--outline btn--small">J'aime</button>
164                        </div>
165                    </div>
166                    <div class="product-card__content">
167                        <p class="product-card__category">Audio</p>
168                        <h3 class="product-card__title">Casque sans fil premium</h3>
169                        <div class="product-card__rating">
170                            <span class="product-card__rating-stars">4/5</span>
171                            <span class="product-card__rating-count">(89)</span>
172                        </div>
173                        <div class="product-card__price">
174                            <span class="product-card__price-current">$199</span>
175                        </div>
176                        <div class="product-card__actions">
177                            <button class="btn btn--primary">Ajouter au panier</button>
178                        </div>
179                    </div>
180                </div>
181
182                <!-- Product Card 3 -->
183                <div class="product-card">
184                    <div class="product-card__image">
185                        <img src="https://picsum.photos/300/300?random=12" alt="Product 3">
186                        <div class="product-card__overlay">
187                            <button class="btn btn--primary btn--small">Aperçu rapide</button>
188                            <button class="btn btn--outline btn--small">J'aime</button>
189                        </div>
190                    </div>
191                    <div class="product-card__content">
192                        <p class="product-card__category">Gaming</p>
193                        <h3 class="product-card__title">Console de jeu nouvelle génération</h3>
194                        <div class="product-card__rating">
195                            <span class="product-card__rating-stars">5/5</span>
196                            <span class="product-card__rating-count">(234)</span>
197                        </div>
198                        <div class="product-card__price">
199                            <span class="product-card__price-current">$549</span>
200                        </div>
201                        <div class="product-card__actions">
202                            <button class="btn btn--primary">Ajouter au panier</button>
203                        </div>
204                    </div>
205                </div>
206            </div>
207        </div>
208    </section>
209
210    <!-- Newsletter -->
211    <section class="newsletter">
212        <div class="container">
213            <div class="newsletter__content">
214                <h2 class="newsletter__title">Abonne-toi à la newsletter</h2>
215                <p class="newsletter__description">Reçois les meilleures offres et reste au courant des dernières nouveautés !</p>
216                <form class="newsletter__form">
217                    <input type="email" placeholder="Ton adresse e-mail" class="newsletter__input">
218                    <button type="submit" class="btn btn--primary">S'abonner</button>
219                </form>
220            </div>
221        </div>
222    </section>
223
224    <!-- Footer -->
225    <footer class="footer">
226        <div class="container">
227            <div class="footer__grid">
228                <div class="footer__column">
229                    <h3 class="footer__title">À propos</h3>
230                    <ul class="footer__list">
231                        <li><a href="#">Qui sommes-nous</a></li>
232                        <li><a href="#">Carrières</a></li>
233                        <li><a href="#">Contact</a></li>
234                        <li><a href="#">Blog</a></li>
235                    </ul>
236                </div>
237                <div class="footer__column">
238                    <h3 class="footer__title">Aide</h3>
239                    <ul class="footer__list">
240                        <li><a href="#">Centre d'aide</a></li>
241                        <li><a href="#">Livraison & paiements</a></li>
242                        <li><a href="#">Retours & réclamations</a></li>
243                        <li><a href="#">FAQ</a></li>
244                    </ul>
245                </div>
246            </div>
247            <div class="footer__bottom">
248                <p>&copy; 2024 ShopMaster. Tous droits réservés.</p>
249            </div>
250        </div>
251    </footer>
252</body>
253</html>

Tu as repéré une erreur dans cette leçon ?

Tâches pratiques dans le jeu

Tri vertical
Ordonne les étapes pour déboguer une erreur de compilation SASS :