L'imbrication dans Sass

L'imbrication est l'une des fonctionnalités les plus puissantes de Sass : elle te permet d'imbriquer des sélecteurs à l'intérieur d'autres sélecteurs. Cela signifie que l'on peut organiser nos styles CSS de manière structurée et logique, d'une façon qui reflète plus fidèlement la structure HTML.

Imbrication de base

Par exemple, au lieu d'écrire :

1nav {
2  width: 100%;
3}
4
5nav ul {
6  list-style: none;
7}
8
9nav ul li {
10  display: inline-block;
11}

On peut l'écrire en Sass de la façon suivante :

1nav {
2  width: 100%;
3
4  ul {
5    list-style: none;
6
7    li {
8      display: inline-block;
9    }
10  }
11}

Comme tu peux le voir, les sélecteurs dans Sass sont imbriqués de la même manière que les éléments HTML sur la page. Cela rend le code plus lisible et plus facile à maintenir.

L'esperluette (&)

Dans Sass, l'esperluette (&) sert à référencer le sélecteur parent. Elle peut être très utile lorsque tu veux définir des styles pour hover, active, ou une classe spécifique d'un élément donné.

Par exemple :

1button {
2  background-color: blue;
3  color: white;
4
5  &:hover {
6    background-color: darkblue;
7  }
8
9  &.primary {
10    background-color: red;
11  }
12}

Après compilation en CSS, on obtient :

1button {
2  background-color: blue;
3  color: white;
4}
5
6button:hover {
7  background-color: darkblue;
8}
9
10button.primary {
11  background-color: red;
12}

Avertissement

Bien que l'imbrication soit un outil puissant, elle doit être utilisée avec modération. Une imbrication trop profonde peut conduire à générer des sélecteurs complexes et trop spécifiques, ce qui rend le code plus difficile à maintenir et peut provoquer des comportements de style inattendus. Une bonne pratique consiste à éviter d'imbriquer au-delà de 3 niveaux.

Souviens-toi que Sass est un outil conçu pour t'aider à créer un code CSS meilleur, mieux organisé et plus facile à gérer. Essaie toujours d'utiliser ses fonctionnalités de la manière la plus bénéfique pour ton projet.

Exercice : l'imbrication dans Sass

Ta tâche consiste à créer une mise en page web organisée et responsive en utilisant l'imbrication de Sass. Dans cet exercice, tu utiliseras l'imbrication de base, l'esperluette (&), et tu veilleras à la lisibilité et à l'organisation du code.

Objectifs de l'exercice

1. Créer un en-tête avec un menu de navigation imbriqué.
2. Créer une section avec des cartes qui changent de style au survol.
3. Créer un pied de page avec des éléments de contact imbriqués.
4. Assurer la responsivité et la lisibilité du code Sass.

Étape 1 : structure HTML

D'abord, crée un fichier HTML avec 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>Nesting in Sass</title>
7  <link rel="stylesheet" href="styles.css">
8</head>
9<body>
10  <header class="main-header">
11    <h1>My Website</h1>
12    <nav>
13      <ul>
14        <li><a href="#">Home</a></li>
15        <li><a href="#">About Us</a></li>
16        <li><a href="#">Contact</a></li>
17      </ul>
18    </nav>
19  </header>
20  <section class="cards-section">
21    <div class="card">
22      <h2>Card 1</h2>
23      <p>Card 1 description.</p>
24    </div>
25    <div class="card">
26      <h2>Card 2</h2>
27      <p>Card 2 description.</p>
28    </div>
29    <div class="card">
30      <h2>Card 3</h2>
31      <p>Card 3 description.</p>
32    </div>
33  </section>
34  <footer class="main-footer">
35    <p>&copy; 2023 My Website</p>
36    <div class="contact-info">
37      <p>Email: contact@mywebsite.com</p>
38      <p>Phone: +1 234 567 890</p>
39    </div>
40  </footer>
41</body>
42</html>

Étape 2 : styles Sass

Crée maintenant un fichier Sass (styles.scss) et ajoute les styles suivants avec imbrication :

1/* Styles de base */
2body {
3  font-family: Arial, sans-serif;
4  margin: 0;
5  padding: 0;
6  background-color: #f0f0f0;
7}
8
9.main-header {
10  background-color: #333;
11  color: #fff;
12  padding: 20px;
13  text-align: center;
14
15  nav {
16    ul {
17      list-style: none;
18      padding: 0;
19
20      li {
21        display: inline-block;
22        margin: 0 10px;
23
24        a {
25          color: #fff;
26          text-decoration: none;
27
28          &:hover {
29            text-decoration: underline;
30          }
31        }
32      }
33    }
34  }
35}
36
37.cards-section {
38  display: flex;
39  justify-content: space-around;
40  padding: 20px;
41
42  .card {
43    background-color: #fff;
44    border: 1px solid #ccc;
45    padding: 20px;
46    width: 30%;
47    box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.1);
48
49    h2 {
50      margin-top: 0;
51    }
52
53    &:hover {
54      background-color: #f9f9f9;
55      transform: scale(1.05);
56      transition: all 0.3s ease;
57    }
58  }
59}
60
61.main-footer {
62  background-color: #333;
63  color: #fff;
64  padding: 20px;
65  text-align: center;
66
67  .contact-info {
68    p {
69      margin: 5px 0;
70
71      &:first-child {
72        font-weight: bold;
73      }
74    }
75  }
76}

Étape 3 : 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 (styles.css) à partir du fichier Sass (styles.scss).

Étape 4 : tester

Ouvre le fichier HTML dans un navigateur pour voir les effets de l'imbrication Sass. Assure-toi que tous les styles fonctionnent comme prévu.

Exercice

1. Étendre le menu de navigation : ajoute un sous-menu à l'un des éléments de navigation (<nav>) qui apparaît au survol. Stylise le sous-menu à l'aide de l'imbrication.
2. Animation des cartes : ajoute une animation aux cartes (.card) en utilisant @keyframes et animation. L'animation doit faire monter et descendre les cartes en douceur.
3. Responsivité : ajoute des media queries imbriquées pour rendre la mise en page responsive. Par exemple, fixe la largeur des cartes (.card) à 100% sur les écrans plus petits.
4. Style du pied de page : enrichis le style du pied de page (.main-footer) en ajoutant des styles imbriqués pour les liens vers les réseaux sociaux qui apparaîtront dans le pied de page.

Utilise toutes les techniques d'imbrication présentées pour créer une mise en page web bien organisée, lisible et responsive.

1<!DOCTYPE html>
2<html lang="en">
3<head><title>Boutons</title></head>
4<body style="background:#d4a574;font-family:serif;padding:20px;color:#3d2914">
5<h1>Boutons</h1>
6<button>Soumettre au pharaon</button>
7</body>
8</html>