Comment utiliser l'esperluette (&) dans les sélecteurs SASS : résoudre les problèmes d'imbrication avec les mixins

Esperluette (&) dans les sélecteurs SASS : utilisations et solutions de contournement

SASS, un langage de prétraitement pour CSS, utilise un symbole esperluette (&) pour représenter le sélecteur parent, permettant un code réutilisable et maintenable. Cependant, utiliser l'esperluette à la fin ou dans le cadre d'un sélecteur peut poser des problèmes.

Aperçu du problème

Un mixin destiné à imiter le comportement LESS a un sélecteur avec un esperluette (&) à la fin, provoquant une sortie incorrecte. Le résultat souhaité est de générer un ensemble imbriqué de sélecteurs où la classe d'appelant est ajoutée à chaque niveau suivant, comme indiqué ci-dessous :

.callerClass .foreverAlone{
    ...
} 

.callerClass .iThink .illNeverWork.callerClass{

    color: $pinkUnicornRainbow;
    ...
}

Solutions

Pour Sass versions 3.2 et inférieures, les manières valides d'utiliser le sélecteur parent incluent :

&, &.bar, &#bar, &:after, &[active]

Dans Sass 3.3, la syntaxe suivante est ajoutée :

&bar, &-bar

Sass 3.4 introduit une nouvelle fonctionnalité dans laquelle le l'esperluette peut être attribuée à une variable et utilisée dans une règle @at-root :

$foo: &;

@at-root bar#{&} {
    color: red;
}

Application au problème

Pour résoudre le mixin donné, l'esperluette doit être utilisée conjointement avec la classe appelante comme suit :

@mixin button-variant($color, $background, $border)
{
    ...
    .callerClass&.foreverAlone{
        ...
    }

    .callerClass&.iThink .illNeverWork.callerClass& {

        color: $pinkUnicornRainbow;
        ...
    }
}

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!