Imbrication

Par défaut le langage CSS ne permet pas de faire d'imbrications, communément appelé "nesting" en anglais. Il est donc parfois nécessaire de répéter un sélecteur plusieurs fois dans son code CSS.

Heureusement, Sass apporte cette fonctionnalité à CSS, ce qui permet d'accélérer l'écriture de feuilles de styles et de simplifier leur lecture.

Imbrications de base

Afin d'éviter de répéter le sélecteur .list à plusieurs reprises, il est possible d'écrire en SCSS:

.list { position: relative; .item { display: inline-block; } .link { color: blue; } }

Ce qui générera le code CSS suivant ⏬

.list { position: relative; } .list .item { display: inline-block; } .list .link { color: blue; }

Niveaux d'imbrications

Vous pouvez imbriquer des éléments ainsi à l'infini. Dans l'exemple précédent, nous avions un seul niveau d'imbrication.

Voici maintenant un exemple contenant deux niveaux d'imbrications:

.list { position: relative; .item { display: inline-block; .link { color: blue; } } }

Ce qui générera le code CSS suivant ⏬

.list { position: relative; } .list .item { display: inline-block; } .list .item .link { color: blue; } // 👈 ici

Voici un autre exemple d'utilisation.

Dans l'exemple précédent, lorsqu'on compile le SCSS en CSS, ça donnera le code suivant:

a { color: purple; text-decoration: none; } a:hover { text-decoration: underline; } header nav ul { list-style: none; margin: 0; padding: 5px; background: #665566; font-size: 18px; } header nav ul li { display: inline-block; padding: 0 10px; position: relative; } header nav ul li .link { color: coral; text-transform: uppercase; font-weight: 100; } header nav ul li .link--active { text-decoration: underline; color: white; } header nav ul li ul { position: absolute; z-index: 100; background-color: white; width: auto; box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.3); font-size: 14px; } header nav ul li ul li { padding: 5px 0; } header nav ul li ul li .link { color: #665566; } Évitez d’abusez des imbrications. Plus de trois niveaux d’imbrication est généralement considéré comme étant une mauvaise pratique et rendra votre code difficile à déboguer. Nesting (imbrication) Sélecteurs avancés

Les imbrications sont compatibles avec tous les sélecteurs CSS avancés.

Par exemple:

.list { > .item { display: inline-block; } + .logo { display: none; } }

Générera le code CSS suivant ⏬

.list > .item { display: inline-block; } .list + .logo { display: none; } selector combinator Sélecteur de parent

Le sélecteur de parent & est un sélecteur spécial inventé par Sass permettant de faire référence au sélecteur parent courant.

Avant de démontrer le sélecteur parent, rappelez vous que tout sélecteur imbriqué dans un autre se fait convertir par défaut en enfant du premier.

Autrement dit:

.selecteur1 { .selecteur2 { ... } }

Générera le code CSS suivant ⏬

.selecteur1 .selecteur2 { ... }

Remarquez l'espace entre les deux sélecteurs indiquant que .selecteur2 est enfant de .sélecteur1. Il sera donc appliqué à des balises imbriquées comme dans le code suivant:

Revenons au sélecteur parent, grâce à celui-ci &, il est possible de contourner ce comportement.

Si on ajoute un & devant le .selecteur2

.selecteur1 { &.selecteur2 { ... } }

Générera le code CSS suivant ⏬

.selecteur1.selecteur2 { ... }

Remarquez maintenant l'espace inexistant entre .selecteur1 .selecteur2, cela signifie que le sélecteur 2 s'est appliqué au parent dans l'impbrication Sass. Ce qui en résulte d'un sélecteur css qui vise un élément qui contient les 2 classes comme dans l'exemple html ci-dessous.

Pseudo-classes

Les imbrications Sass sont compatibles avec les pseudo-classes lorsqu'un sélecteur parent est utilisé.

Par exemple:

.btn { background: blue; &:hover { background: lightblue; } }

Générera le code CSS suivant ⏬

.btn { background: blue; } .btn:hover { background: lightblue; }

Autre exemple de pseudo-classe:

.section { background: white; &:nth-child(3) { background: gray; } }

Générera le code CSS suivant ⏬

.section { background: white; } .section:nth-child(3) { background: gray; }

Remarquez l'utilisation du sélecteur parent &. Celui-ci permet de faire une référence au sélecteur courant, en l'occurence .btn et de lui rabouter directement, sans espace, la pseudo-classe :hover.

Pseudo-éléments

Les imbrications Sass sont compatibles avec les pseudo-éléments lorsqu'un sélecteur parent est utilisé.

Par exemple:

.btn { background: blue; &::before { content: "🔘"; } }

Générera le code CSS suivant ⏬

.btn { background: blue; } .btn::before { content: "🔘"; }

Renversé

Parfois, il souhaitable de spécifier que notre élément devrait avoir une apparence différente dans un certain contexte.

Par exemple, lorsqu'un bouton est affiché dans un menu, sa couleur de fond pourrait devoir être grise plutôt que bleue. Le sélecteur parent permet de couvrir ce cas de figure sans avoir à quitter le contexte du sélecteur du bouton en utilisant ce sélecteur comme suffix.

.btn { .menu & { background: grey; } }

Générera le code CSS suivant ⏬

.menu .btn { background: grey; } Parent selector

OUTIL Sass Playground Terrain de jeu SASS permettant de voir en temps réel la compilation CSS que produirait son code.

OUTIL CSS to SCSS Permet de convertir la structure d’un code CSS en imbrication SCSS.