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

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

Mary-Kate Olsen
Mary-Kate Olsenoriginal
2024-10-30 05:00:02272parcourir

How to Use the Ampersand (&) in SASS Selectors: Solving Nesting Challenges with 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!

Déclaration:
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn