Sass : guide du préprocesseur CSS

Imagine que ton site sur le temple de Karnak compte mille lignes de CSS. Tu as saisi la couleur or #D4AF37 à quarante endroits, et tu copies le même ensemble de déclarations dans chaque nouveau bouton. Le jour où le pharaon réclame un or plus sombre, une fastidieuse recherche dans tout le rouleau t'attend. Ce sont précisément ces soucis que Sass résout.

Sass, qui signifie Syntactically Awesome Style Sheets, est un préprocesseur CSS qui étend considérablement les possibilités du CSS classique. Il offre des variables, des mixins, l'héritage, l'imbrication, des opérateurs, des fonctions et le contrôle de flux, ce qui rend le travail avec les feuilles de style plus efficace et plus agréable.

Ce que tu vas apprendre

• expliquer ce qu'est un préprocesseur et pourquoi le navigateur ne lit pas les fichiers Sass,
• distinguer la syntaxe SCSS de la syntaxe indentée de Sass,
• compiler un fichier .scss en CSS classique,
• utiliser l'imbrication, les variables, les mixins et l'héritage.

Le préprocesseur, scribe de l'architecte

Le navigateur ne comprend que le CSS, tu ne peux donc pas relier directement un fichier .scss à une page. Tu écris ton code en Sass, et un compilateur le traduit en un fichier .css classique, comme un scribe qui recopie les abréviations de l'architecte en hiéroglyphes que chacun peut lire sur le mur d'un temple. Le chemin est donc le suivant : un fichier .scss, le compilateur Sass, un fichier .css, et seulement ensuite le navigateur. Le compilateur principal est Dart Sass, disponible sur npm sous la forme du paquet sass :

1npm install --save-dev sass
2npx sass styles.scss styles.css

La première commande ajoute le compilateur au projet, la seconde lit styles.scss et écrit le résultat dans styles.css. Le fichier source reste intact, et tu ne relies à la page que le CSS généré. Avec l'option --watch, le compilateur reconstruit le CSS à chaque enregistrement du fichier.

Syntaxe

Sass prend en charge deux syntaxes différentes : SCSS (une syntaxe proche du CSS, avec des accolades, fichiers .scss) et Sass (basée sur l'indentation, sans accolades, fichiers .sass). SCSS est un sur-ensemble du CSS : à quelques rares exceptions près, toute feuille de style CSS valide est aussi un fichier SCSS valide.

Exemple de syntaxe SCSS

Voici à quoi ressemble un en-tête avec un sous-en-tête imbriqué, écrit en SCSS, c'est-à-dire presque comme du CSS classique :

1.entete {
2  color: red;
3
4  .sous-entete {
5    font-size: 16px;
6  }
7}

Les accolades et les points-virgules restent là où ils seraient en CSS. La seule nouveauté, c'est que la règle .sous-entete se trouve à l'intérieur de la règle .entete.

Exemple de syntaxe Sass

Le même fragment en syntaxe indentée perd ses accolades et ses points-virgules, et seule l'indentation décide de la structure :

1.entete
2  color: red
3
4  .sous-entete
5    font-size: 16px

À partir des deux versions, le compilateur générera un CSS identique, car c'est l'écriture qui diffère, pas le résultat. Je te recommande SCSS : il ressemble au CSS que tu connais déjà, et c'est en SCSS qu'est écrite la majorité des projets et de la documentation.

Imbrication

En HTML, une navigation est une liste ul, qui contient des éléments li, qui contiennent à leur tour des liens a. Sass te permet de reproduire cette hiérarchie en imbriquant les sélecteurs, et tu gardes ainsi les règles liées au même endroit :

1.nav {
2  ul {
3    margin: 0;
4    padding: 0;
5    list-style: none;
6  }
7
8  li { display: inline-block; }
9
10  a {
11    display: block;
12    padding: 6px 12px;
13    text-decoration: none;
14  }
15}

Après compilation, tu obtiens des sélecteurs descendants ordinaires : .nav ul, .nav li et .nav a. Le HTML ne change pas du tout, car l'imbrication n'existe que dans le fichier source. Ne descends toutefois pas au-delà de trois niveaux, car chaque niveau supplémentaire allonge le sélecteur et augmente sa spécificité.

Variables

Une variable stocke une valeur utilisée à plusieurs endroits de la feuille de style. En Sass, son nom commence par le signe dollar, et après le nom tu places deux-points, la valeur et un point-virgule, par exemple $gold: #D4AF37 pour l'or égyptien :

1$primary-color: #333;
2
3body {
4  background-color: $primary-color;
5}

Le compilateur remplace chaque $primary-color par #333, donc dans le CSS généré la variable n'existe plus, il ne reste que la valeur. C'est la différence avec les variables CSS comme --primary-color, qui vivent dans le navigateur. Tu modifies la valeur à un seul endroit, tu recompiles, et la nouvelle couleur apparaît partout.

Mixins

Un mixin est un ensemble nommé de déclarations que tu définis une seule fois avec la directive @mixin, puis que tu insères dans n'importe quelle règle avec la directive @include. Il fonctionne comme un sceau portant le cartouche du pharaon, apposé sur une tablette après l'autre :

1@mixin reset-list {
2  margin: 0;
3  padding: 0;
4  list-style: none;
5}
6
7ul {
8  @include reset-list;
9}

Le compilateur colle les trois déclarations du mixin à la place de @include, tu les verras donc dans le CSS, à l'intérieur de la règle pour ul. Le mixin lui-même n'apparaît pas dans le résultat tant que tu ne l'utilises pas.

Héritage

Parfois, plusieurs classes partagent une base commune et ne diffèrent que par un détail, comme les messages de succès et d'erreur. La directive @extend permet à une classe d'hériter de tous les styles d'une autre classe :

1.message {
2  border: 1px solid #ccc;
3  padding: 10px;
4  color: #333;
5}
6
7.success {
8  @extend .message;
9  border-color: green;
10}
11
12.error {
13  @extend .message;
14  border-color: red;
15}

Le compilateur ne copie pas les déclarations : il ajoute les sélecteurs à la règle existante et forme le groupe .message, .success, .error. Chaque classe ne redéfinit ensuite que la couleur de la bordure. Dans les grands projets, @extend peut toutefois générer des listes de sélecteurs étonnamment longues, c'est pourquoi je préfère généralement les mixins.

Contrôle de flux

Sass propose aussi des instructions conditionnelles et des boucles, telles que @if, @for, @each et @while. Grâce à elles, la feuille de style génère elle-même des séries de classes, par exemple une pour chaque couleur de la palette. Tu les découvriras dans les prochaines leçons du module.

Sass est un outil puissant qui peut augmenter considérablement la productivité et le plaisir d'écrire du CSS. Le CSS moderne dispose déjà de ses propres variables et de l'imbrication, que tu découvriras plus loin dans le cours, mais Sass garde l'avantage grâce aux mixins, aux boucles et au découpage du code en modules. Dans le bac à sable ci-dessous, compare le fichier styles.scss au styles.css compilé et regarde ce que le compilateur a fait de chaque variable.

Souviens-toi : Sass est le scribe qui transforme tes abréviations en hiéroglyphes CSS bien nets, et le navigateur ne lit que le résultat de son travail.

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/Sass - Introduction</title>
7    <link rel="stylesheet" href="styles.css">
8</head>
9<body>
10    <div class="container">
11        <h1>Introduction à SCSS/Sass</h1>
12
13        <section class="demo-section">
14            <h2>Les variables dans SCSS</h2>
15            <div class="variables-demo">
16                <div class="color-box primary">Couleur primaire ($primary-color)</div>
17                <div class="color-box secondary">Couleur secondaire ($secondary-color)</div>
18                <div class="color-box accent">Couleur d'accent ($accent-color)</div>
19            </div>
20            <div class="font-demo">
21                <p class="font-primary">Police primaire ($font-primary)</p>
22                <p class="font-secondary">Police secondaire ($font-secondary)</p>
23            </div>
24        </section>
25
26        <section class="demo-section">
27            <h2>L'imbrication dans SCSS</h2>
28            <nav class="navbar">
29                <ul>
30                    <li><a href="#">Accueil</a></li>
31                    <li><a href="#">À propos</a></li>
32                    <li><a href="#">Services</a></li>
33                    <li><a href="#">Contact</a></li>
34                </ul>
35            </nav>
36            <p class="description">La navigation a été stylisée à l'aide de l'imbrication SCSS</p>
37        </section>
38
39        <section class="demo-section">
40            <h2>Esperluette (&) - sélecteur parent</h2>
41            <div class="buttons-demo">
42                <button class="btn">Bouton ordinaire</button>
43                <button class="btn btn--primary">Bouton primaire</button>
44                <button class="btn btn--secondary">Bouton secondaire</button>
45                <button class="btn btn--large">Grand bouton</button>
46            </div>
47        </section>
48
49        <section class="demo-section">
50            <h2>Partials et modules</h2>
51            <div class="modules-demo">
52                <div class="card">
53                    <div class="card-header">
54                        <h3>Carte modulaire</h3>
55                    </div>
56                    <div class="card-body">
57                        <p>Cette carte utilise des styles provenant de différents modules SCSS.</p>
58                    </div>
59                    <div class="card-footer">
60                        <button class="btn btn--primary">Action</button>
61                    </div>
62                </div>
63            </div>
64        </section>
65
66        <section class="demo-section">
67            <h2>Mixins</h2>
68            <div class="mixins-demo">
69                <div class="flex-container">
70                    <div class="flex-item">Élément 1</div>
71                    <div class="flex-item">Élément 2</div>
72                    <div class="flex-item">Élément 3</div>
73                </div>
74                <div class="shadow-box">Boîte avec ombre (mixin)</div>
75                <div class="gradient-box">Boîte avec dégradé (mixin)</div>
76            </div>
77        </section>
78
79        <section class="demo-section">
80            <h2>Extend et héritage</h2>
81            <div class="extend-demo">
82                <div class="message">Message de base</div>
83                <div class="message message--success">Message de succès</div>
84                <div class="message message--error">Message d'erreur</div>
85                <div class="message message--warning">Message d'avertissement</div>
86            </div>
87        </section>
88
89        <section class="demo-section">
90            <h2>Opérateurs mathématiques</h2>
91            <div class="operators-demo">
92                <div class="grid-container">
93                    <div class="grid-item">Élément 1</div>
94                    <div class="grid-item">Élément 2</div>
95                    <div class="grid-item">Élément 3</div>
96                    <div class="grid-item">Élément 4</div>
97                </div>
98                <p class="calculation-info">Largeur calculée : (100% - 60px) / 4</p>
99            </div>
100        </section>
101
102        <section class="demo-section">
103            <h2>Fonctions SCSS</h2>
104            <div class="functions-demo">
105                <div class="color-functions">
106                    <div class="color-original">Couleur d'origine</div>
107                    <div class="color-lighter">Plus clair (lighten)</div>
108                    <div class="color-darker">Plus foncé (darken)</div>
109                    <div class="color-saturated">Saturé (saturate)</div>
110                </div>
111            </div>
112        </section>
113
114        <section class="demo-section">
115            <h2>Media Queries avec mixins</h2>
116            <div class="responsive-demo">
117                <div class="responsive-box">
118                    <p>Cette section change de disposition selon la taille de l'écran</p>
119                    <div class="responsive-grid">
120                        <div class="responsive-item">Élément 1</div>
121                        <div class="responsive-item">Élément 2</div>
122                        <div class="responsive-item">Élément 3</div>
123                        <div class="responsive-item">Élément 4</div>
124                    </div>
125                </div>
126            </div>
127        </section>
128    </div>
129</body>
130</html>