Comment étendre les sélecteurs parents dans les mixins SASS lors de l'utilisation de l'esperluette (&) à la fin d'un sélecteur ?

Esperluette (&) dans les sélecteurs SASS : extension de la portée des parents

Dans SASS, l'esperluette (&) est un outil puissant pour extension des sélecteurs parents. Il vous permet d'imbriquer des règles dans un mixin de manière à inclure le nom de classe du sélecteur parent. Cependant, utiliser l'esperluette à la fin d'un sélecteur présente un défi unique.

Le problème réside dans la garantie que le sélecteur inclut le nom de la classe appelante. Considérez le mixin Sass suivant :

<code class="sass">@mixin button-variant($color, $background, $border) {
    ...
    .foreverAlone {
        ...
    }

    .iThink .illNeverWork&amp; {
        color: $pinkUnicornRainbow;
        ...
    }
}</code>

Lorsque ce mixin est appelé dans une autre classe CSS, le code généré n'inclura pas le nom de la classe de l'appelant. Au lieu de cela, il produira :

<code class="css">.foreverAlone {
    ...
}

.iThink .illNeverWork.callerClass {
    color: #123ABC;
    ...
}</code>

Pour surmonter ce problème, vous pouvez utiliser les techniques suivantes :

Sass versions 3.2 et antérieures :

• Utilisation de plusieurs sélecteurs : Séparez chaque sélecteur par des virgules, en vous assurant que l'esperluette (&) est utilisée de manière cohérente.

<code class="sass">@mixin button-variant($color, $background, $border) {
    ...
    .foreverAlone,
    .iThink &amp;.illNeverWork {
        color: $pinkUnicornRainbow;
        ...
    }
}</code>

Sass version 3.3 :

• Syntaxe avec trait d'union : Utilisez la syntaxe avec trait d'union pour étendre le sélecteur parent.

<code class="sass">@mixin button-variant($color, $background, $border) {
    ...
    .iThink &amp;-illNeverWork {
        color: $pinkUnicornRainbow;
        ...
    }
}</code>

Sass version 3.4 :

• Règles at-root : Définissez une variable pour contenir le sélecteur parent et utilisez la règle @at-root pour l'étendre.

<code class="sass">@mixin button-variant($color, $background, $border) {
    ...
    $parent: &amp;;
    @at-root .iThink#{&amp;} {
        color: $pinkUnicornRainbow;
        ...
    }
}</code>

En implémentant ces techniques, vous pouvez étendre efficacement les sélecteurs parents au sein d'un mixin, en garantissant que le code généré inclut le nom de la classe appelante.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!