Imbrication dans SASS

Imbrication dans SASS

Cet article explique l’imbrication dans SASS.

Nous expliquerons l’imbrication dans SASS étape par étape, avec des exemples de code pour approfondir votre compréhension.

YouTube Video

Imbrication dans SASS

SASS est un langage de feuille de style étendu pour CSS qui offre de nombreuses fonctionnalités pour un stylisme efficace. Parmi celles-ci, l’imbrication est une fonctionnalité particulièrement utile pour représenter visuellement la structure hiérarchique du CSS.

Les bases de l’imbrication

Dans SASS, vous pouvez organiser votre code visuellement en écrivant des sélecteurs CSS avec une structure hiérarchique. Par exemple, voyons comment vous pouvez réécrire le code CSS suivant en utilisant l’imbrication.

 1/* CSS */
 2.nav {
 3    background-color: #333;
 4}
 5.nav ul {
 6    margin: 0;
 7    padding: 0;
 8}
 9.nav ul li {
10    list-style: none;
11}
12.nav ul li a {
13    color: #fff;
14    text-decoration: none;
15}

Avec SASS, vous pouvez écrire ce code de façon concise grâce à l’imbrication, comme ci-dessous.

 1/* SASS */
 2.nav {
 3    background-color: #333;
 4
 5    ul {
 6        margin: 0;
 7        padding: 0;
 8
 9        li {
10            list-style: none;
11
12            a {
13                color: #fff;
14                text-decoration: none;
15            }
16        }
17    }
18}
  • Ce code utilise la fonctionnalité d’imbrication de SASS pour décrire de manière concise et hiérarchique les styles du menu de navigation. Grâce à l’imbrication, les relations parent-enfant sont clairement visibles et la lisibilité s’améliore.

Référence au sélecteur parent (&)

Lorsque vous devez référencer le sélecteur parent à l’intérieur de styles imbriqués, utilisez &. Cela vous permet de créer des sélecteurs avec des états ou des modificateurs spécifiques.

 1.button {
 2    background-color: #007bff;
 3    color: #fff;
 4
 5    &:hover {
 6        background-color: #0056b3;
 7    }
 8
 9    &:active {
10        background-color: #003f7f;
11    }
12}
  • Ce code utilise & en SCSS pour définir les états :hover et :active pour le sélecteur parent .button.

CSS généré

 1.button {
 2    background-color: #007bff;
 3    color: #fff;
 4}
 5.button:hover {
 6    background-color: #0056b3;
 7}
 8.button:active {
 9    background-color: #003f7f;
10}

Imbrication des media queries

Dans SASS, vous pouvez également imbriquer des media queries. Cela vous permet d’implémenter un design réactif tout en maintenant la pertinence de vos styles.

 1.container {
 2    width: 100%;
 3
 4    @media (min-width: 768px) {
 5        width: 750px;
 6    }
 7
 8    @media (min-width: 1024px) {
 9        width: 970px;
10    }
11}
  • Ce code imbrique une media query à l’intérieur de la classe .container, permettant un design réactif qui change la largeur en fonction de la taille de l’écran.

CSS généré

 1.container {
 2    width: 100%;
 3}
 4@media (min-width: 768px) {
 5    .container {
 6        width: 750px;
 7    }
 8}
 9@media (min-width: 1024px) {
10    .container {
11        width: 970px;
12    }
13}

Points à noter concernant l’imbrication

Un usage excessif de l’imbrication peut rendre votre code trop complexe et réduire sa maintenabilité. Vous devez éviter une imbrication trop profonde, comme dans l’exemple ci-dessous.

 1.header {
 2    .nav {
 3        ul {
 4            li {
 5                a {
 6                    color: red;
 7                }
 8            }
 9        }
10    }
11}

Ce type de code est trop imbriqué, il peut donc être refactorisé comme suit.

1.header .nav ul li a {
2    color: red;
3}

Exemple pratique : barre de navigation

Voici un exemple de stylisation de barre de navigation utilisant l’imbrication SASS.

 1.navbar {
 2    background-color: #222;
 3    color: #fff;
 4
 5    ul {
 6        display: flex;
 7        list-style: none;
 8        margin: 0;
 9        padding: 0;
10
11        li {
12            margin-right: 15px;
13
14            a {
15                color: #fff;
16                text-decoration: none;
17
18                &:hover {
19                    text-decoration: underline;
20                }
21            }
22        }
23    }
24}
  • Ce code organise et définit les styles pour les listes et les liens à l’intérieur de la barre de navigation, y compris les effets au survol, en utilisant l’imbrication SASS.

CSS généré

 1.navbar {
 2    background-color: #222;
 3    color: #fff;
 4}
 5.navbar ul {
 6    display: flex;
 7    list-style: none;
 8    margin: 0;
 9    padding: 0;
10}
11.navbar ul li {
12    margin-right: 15px;
13}
14.navbar ul li a {
15    color: #fff;
16    text-decoration: none;
17}
18.navbar ul li a:hover {
19    text-decoration: underline;
20}

Résumé

La fonctionnalité d’imbrication de SASS est un outil puissant pour décrire de manière concise la structure hiérarchique du CSS et améliorer la lisibilité. Cependant, il est important d’éviter une imbrication excessive et d’organiser correctement votre code.

Vous pouvez suivre l'article ci-dessus avec Visual Studio Code sur notre chaîne YouTube. Veuillez également consulter la chaîne YouTube.

YouTube Video