Combinateurs dans l’imbrication

Combinateurs dans l’imbrication

Cet article explique les combinateurs dans l’imbrication.

Nous expliquerons comment utiliser les combinateurs dans l’imbrication avec SASS et fournirons du code d’exemple pour vous aider à comprendre étape par étape.

YouTube Video

Combinateurs dans l’imbrication

Dans SASS, vous pouvez écrire des sélecteurs CSS de manière concise en fonction des relations parent-enfant, mais il est important de bien gérer les combinateurs comme les sélecteurs descendants ou adjacents.

Notions de base de l’imbrication

Dans SASS, en imbriquant des sélecteurs enfants dans des sélecteurs parents, vous pouvez représenter clairement et de façon concise les relations parent-enfant en CSS.

Exemple : Imbrication de base

1.nav {
2    ul {
3        li {
4            color: blue;
5        }
6    }
7}

CSS compilé

1.nav ul li {
2    color: blue;
3}

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

Le & de SASS est utilisé pour faire référence au sélecteur parent courant.

Combiner les combinateurs et &

En utilisant &, vous pouvez construire des sélecteurs flexibles.

Exemple
1.card {
2    & > .title {
3        font-weight: bold;
4    }
5    & + .card {
6        margin-top: 20px;
7    }
8}
CSS compilé
1.card > .title {
2    font-weight: bold;
3}
4.card + .card {
5    margin-top: 20px;
6}

Notation abrégée pour &

Dans SASS, lorsqu’un combinateur est placé au début d’un sélecteur, le sélecteur parent est implicitement inséré, vous pouvez donc omettre le &.

Cas où l’omission est possible

Par exemple, lorsque vous écrivez + .item, SASS l’interprète en interne comme & + .item et génère automatiquement la combinaison avec le sélecteur parent.

Exemple
1.item {
2    + .item {
3        margin-top: 10px;
4    }
5    &--hover {
6        background-color: red;
7    }
8}
CSS compilé
1.item + .item {
2  margin-top: 10px;
3}
4.item--hover {
5  background-color: red;
6}

Aperçu des combinateurs

Les combinateurs CSS définissent la relation entre les sélecteurs. Voici les principaux types de combinateurs.

  1. Sélecteur descendant (espace) Un sélecteur descendant cible tous les éléments descendants contenus dans un élément parent. Exemple : .parent .child

  2. Sélecteur enfant (> ) Un sélecteur enfant cible uniquement les enfants directs. Exemple : .parent > .child

  3. Sélecteur adjacent (+) Un sélecteur adjacent cible l’élément frère immédiatement suivant. Exemple : .sibling1 + .sibling2

  4. Sélecteur général de frères (~) Le sélecteur général cible tous les éléments frères suivants. Exemple : .sibling1 ~ .sibling2

Comment utiliser les combinateurs dans SASS

Sélecteur descendant (espace)

Dans l’imbrication SASS, le sélecteur descendant (espace) est appliqué par défaut.

Exemple
1.container {
2    .header {
3        .title {
4            font-size: 20px;
5        }
6    }
7}
CSS compilé
1.container .header .title {
2    font-size: 20px;
3}

Sélecteur enfant (> )

Si vous souhaitez utiliser un sélecteur enfant, écrivez explicitement > dans votre code SASS.

Exemple
1.container {
2    & > .header {
3        & > .title {
4            font-size: 20px;
5        }
6    }
7}
CSS compilé
1.container > .header > .title {
2    font-size: 20px;
3}

Sélecteur adjacent (+)

Pour styliser l’élément frère immédiatement suivant, utilisez +.

Exemple
1.item {
2    & + .item {
3        margin-top: 10px;
4    }
5}
CSS compilé
1.item + .item {
2    margin-top: 10px;
3}

Sélecteur général de frères (~)

Pour styliser tous les frères suivants au même niveau, utilisez ~.

Exemple
1.alert {
2    & ~ .alert {
3        border-top: 1px solid red;
4    }
5}
CSS compilé
1.alert ~ .alert {
2    border-top: 1px solid red;
3}

Pseudo-classes et pseudo-éléments avec imbrication

Les pseudo-classes et pseudo-éléments peuvent aussi être écrits facilement en SASS.

Exemple
1.button {
2    &:hover {
3        background-color: blue;
4    }
5    &::after {
6        content: '';
7        display: block;
8    }
9}
CSS compilé
1.button:hover {
2    background-color: blue;
3}
4.button::after {
5    content: '';
6    display: block;
7}

Exemple pratique

Voici un exemple de style complexe combinant plusieurs combinateurs.

Code SASS
 1.menu {
 2    .menu-item {
 3        & > .submenu {
 4            display: none;
 5
 6            & > .submenu-item {
 7                font-size: 14px;
 8            }
 9        }
10        & + .menu-item {
11            margin-left: 15px;
12        }
13    }
14}
CSS compilé
1.menu .menu-item > .submenu {
2    display: none;
3}
4.menu .menu-item > .submenu > .submenu-item {
5    font-size: 14px;
6}
7.menu .menu-item + .menu-item {
8    margin-left: 15px;
9}

Résumé

Si vous comprenez correctement l’imbrication et les combinateurs dans SASS, vous pouvez écrire du CSS plus concis et lisible.

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