Comment puis-je utiliser efficacement l'esperluette (&) dans les sélecteurs SASS ?

Esperluette (&) dans les sélecteurs SASS : maîtriser ses utilisations finales et en ligne

Le caractère esperluette (&) joue un rôle crucial dans les sélecteurs SASS, vous permettant de référencer efficacement le sélecteur parent. Cependant, son utilisation peut être délicate, surtout lorsqu'il apparaît à la fin ou dans le cadre d'un sélecteur.

Problème :

Considérez le mixin suivant dans SASS :

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

        .iThink .illNeverWork&amp; {

            color: $pinkUnicornRainbow;
            ...
        }
  }</code>

Lorsqu'il est appelé dans diverses classes div, ce mixin ne parvient pas à générer le CSS prévu. Au lieu de produire quelque chose comme ceci :

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

.callerClass .iThink .illNeverWork.callerClass{

    color: #123ABC;
    ...
}</code>

il produit un résultat incorrect.

Solution :

Pour obtenir le CSS souhaité, comprendre les nuances L'utilisation de l'esperluette est essentielle. Dans les versions SASS 3.2 et antérieures, les méthodes valides suivantes peuvent être utilisées pour faire référence au sélecteur parent :

<code class="sass">.foo {
    &amp;, &amp;.bar, &amp;#bar, &amp;:after, &amp;[active] {
        color: red;
    }
}

.foo {
    .bar &amp; {
        color: red;
    }
}</code>

À partir de Sass 3.3, la syntaxe est simplifiée, permettant une utilisation telle que :

<code class="sass">.foo {
    &amp;bar, &amp;-bar {
        color: red;
    }
}</code>

Pour Sass 3.4 et versions ultérieures, une approche encore plus puissante est disponible :

<code class="sass">.foo {
    $foo: &amp;;
    @at-root bar#{&amp;} {
        color: red;
    }
}</code>

En utilisant ces techniques, vous pouvez gérer efficacement l'utilisation de l'esperluette dans les sélecteurs SASS, vous permettant de générer du CSS précis et maintenable. sorties.

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!