Extend et héritage dans Sass

Sass permet d'utiliser l'héritage et l'extension de sélecteurs, ce qui autorise une optimisation encore plus poussée et évite la répétition de code. Cela signifie que l'on peut créer des classes qui héritent des styles d'autres classes tout en ajoutant leurs propres styles uniques.

La directive @extend

La directive @extend te permet d'hériter de tous les styles d'un autre sélecteur. Par exemple :

1.panel {
2  border: 1px solid gray;
3  padding: 10px;
4  color: black;
5}
6
7.panel-success {
8  @extend .panel;
9  border-color: green;
10}

Après compilation en CSS, on obtient :

1.panel, .panel-success {
2  border: 1px solid gray;
3  padding: 10px;
4  color: black;
5}

.panel-success { border-color: green; }

Comme tu peux le voir, .panel-success hérite de tous les styles de .panel, puis ajoute son propre style unique.

Les sélecteurs placeholder

Sass propose aussi ce qu'on appelle les sélecteurs placeholder, qui se définissent à l'aide du signe %. Ces sélecteurs ne génèrent pas de code CSS par eux-mêmes : ils s'utilisent exclusivement avec la directive @extend.

1%button {
2  padding: 10px 15px;
3  border: none;
4  border-radius: 5px;
5  font-size: 16px;
6}
7
8.button-primary {
9  @extend %button;
10  background-color: blue;
11  color: white;
12}
13
14.button-danger {
15  @extend %button;
16  background-color: red;
17  color: white;
18}

Après compilation en CSS, on obtient :

1.button-primary, .button-danger {
2  padding: 10px 15px;
3  border: none;
4  border-radius: 5px;
5  font-size: 16px;
6}
7
8.button-primary {
9  background-color: blue;
10  color: white;
11}
12
13.button-danger {
14  background-color: red;
15  color: white;
16}

L'extension et l'héritage sont des mécanismes puissants dans Sass qui aident à maintenir un code CSS concis, lisible et facile à gérer. N'oublie toutefois pas de les utiliser avec modération et précaution pour éviter de créer des relations entre styles trop complexes et difficiles à déboguer.

Exercice : utiliser @extend et les sélecteurs placeholder dans un projet Sass

Objectifs de l'exercice

1. Créer des styles de base à l'aide de sélecteurs placeholder.
2. Appliquer la directive @extend pour hériter des styles dans différentes classes.
3. Organiser le code en modules et partials pour une meilleure lisibilité et gestion.

Étape 1 : structure des fichiers

Crée la structure de fichiers suivante pour le projet :

1project/
2|-- scss/
3|   |-- _base.scss
4|   |-- _buttons.scss
5|   |-- main.scss
6|-- css/
7|   |-- main.css
8|-- index.html

Étape 2 : définir les styles de base

Dans le fichier _base.scss, définis les styles de base à l'aide de sélecteurs placeholder :

1// _base.scss
2%base-panel {
3  border: 1px solid gray;
4  padding: 10px;
5  color: black;
6}
7
8%base-button {
9  padding: 10px 15px;
10  border: none;
11  border-radius: 5px;
12  font-size: 16px;
13}

Étape 3 : créer des styles spécifiques

Dans le fichier _buttons.scss, importe les styles de base et crée des classes spécifiques :

1// _buttons.scss
2@use 'base';
3
4.panel-success {
5  @extend %base-panel;
6  border-color: green;
7}
8
9.panel-warning {
10  @extend %base-panel;
11  border-color: orange;
12}
13
14.button-primary {
15  @extend %base-button;
16  background-color: blue;
17  color: white;
18}
19
20.button-danger {
21  @extend %base-button;
22  background-color: red;
23  color: white;
24}

Étape 4 : compiler le Sass

Dans le fichier main.scss, importe tous les fichiers partials et compile en CSS :

1// main.scss
2@use 'base';
3@use 'buttons';

Étape 5 : HTML

Crée un fichier index.html et ajoute la structure suivante :

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>Sass Project</title>
7  <link rel="stylesheet" href="css/main.css">
8</head>
9<body>
10  <div class="panel panel-success">
11    Panel Success
12  </div>
13  <div class="panel panel-warning">
14    Panel Warning
15  </div>
16  <button class="button-primary">Primary Button</button>
17  <button class="button-danger">Danger Button</button>
18</body>
19</html>

Étape 6 : compiler le Sass

Utilise un outil de compilation Sass (par exemple node-sass, Dart Sass, ou le préprocesseur de ton éditeur) pour générer le fichier CSS (main.css) à partir du fichier Sass (main.scss).

Exercice

1. Ajouter de nouveaux styles : crée de nouveaux styles pour des panneaux d'information et des boutons en utilisant des sélecteurs placeholder et la directive @extend.
2. Refactoriser les styles existants : analyse le code CSS existant et utilise des sélecteurs placeholder et la directive @extend pour simplifier et optimiser le code.
3. Tester les styles : teste les styles nouveaux et modifiés sur différents éléments HTML pour t'assurer que l'héritage fonctionne correctement.

Cet exercice t'aidera à comprendre comment utiliser efficacement la directive @extend et les sélecteurs placeholder dans Sass pour créer des feuilles de style modulaires, lisibles et faciles à gérer.

1<!DOCTYPE html>
2<html lang="en">
3<head><title>Boutons radio</title></head>
4<body style="background:#d4a574;font-family:serif;padding:20px;color:#3d2914">
5<h1>Boutons radio</h1>
6<input type="radio" name="god"> Ra <input type="radio" name="god"> Osiris
7</body>
8</html>