Sass combinant le parent en utilisant une esperluette (&) avec des sélecteurs de type

J'ai du mal à nicher à Sass. Disons que j'ai le code HTML suivant:

<p href="#" class="item">Text</p>
<p href="#" class="item">Text</p>
<a href="#" class="item">Link</a>

Lorsque j'essaye d'imbriquer mes styles dans ce qui suit, j'obtiens une erreur de compilation:

.item {
    color: black;
    a& {
        color:blue;
   }
}

Comment référencer un sélecteur de type avant le sélecteur parent lorsqu'il fait partie du même élément?

Comme le souligne Kumar , cela est possible depuis Sass 3.3.0.rc.1 (Maptastic Maple).

La directive @ at-root provoque l'émission d'une ou plusieurs règles à la racine du document, plutôt que d'être imbriquées sous leurs sélecteurs parents.

Nous pouvons combiner la @at-rootdirective avec l' interpolation#{} pour arriver au résultat escompté.

TOUPET

.item {
    color: black;
    @at-root {
        a#{&} {
            color:blue;
        }
    }
}

// Can also be written like this.
.item {
    color: black;
    @at-root a#{&} {
        color:blue;
    }
}

Sortie CSS

.item {
    color: black;
}
a.item {
    color: blue;
}

La @at-rootméthode -only ne résoudra pas le problème si vous avez l'intention d'étendre le sélecteur le plus proche de la chaîne. Par exemple:

#id > .element {
    @at-root div#{&} {
        color: blue;
    }
}

Compilera pour:

div#id > .element {
    color: blue;
}

Que faire si vous devez joindre votre balise au .elementlieu de #id?

Il y a une fonction dans Sass appelée selector-unify()qui résout ce problème. En utilisant ceci avec @at-rootil est possible de cibler .element.

#id > .element {
    @at-root #{selector-unify(&, div)} {
        color: blue;
    }
}

Compilera pour:

#id > div.element {
    color: blue;
}

Pour commencer, (au moment de la rédaction de cette réponse), il n'y a pas de syntaxe sass qui utilise le sélecteur & . Si vous deviez faire quelque chose comme ça, vous auriez besoin d'un espace entre le sélecteur et l'esperluette. Par exemple:

.item {
    .helper & {

    }
}

// compiles to:
.helper .item {

}

L'autre façon d'utiliser l'esperluette est probablement ce que vous recherchez (à tort):

.item {
    &.helper {

    }
}

// compiles to:
.item.helper {

}

Cela vous permet d'étendre les sélecteurs avec d'autres classes, ID, pseudo-sélecteurs, etc. Malheureusement pour votre cas, cela se compilerait théoriquement en quelque chose comme .itema qui ne fonctionne évidemment pas.

Vous voudrez peut-être simplement repenser la façon dont vous écrivez votre CSS. Y a-t-il un élément parent que vous pourriez utiliser?

<div class="item">
    <p>text</p>
    <p>text</p>
    <a href="#">a link</a>
</div>

De cette façon, vous pouvez facilement écrire votre SASS de la manière suivante:

.item {
    p {
        // paragraph styles here
    }
    a {
        // anchor styles here
    }
}

(Note latérale: vous devriez jeter un oeil à votre html. Vous mélangez des guillemets simples et doubles ET mettez des attributs href sur les balises p.)

AFAIK Si vous souhaitez combiner une esperluette pour la classe et les balises en même temps, vous devez utiliser cette syntaxe:

.c1 {
  @at-root h1#{&},
    h2#{&}
    &.c2, {
    color: #aaa;
  }
}

compilera en

h1.c1,
h2.c1,
.c1.c2 {
  color: #aaa;
}

D'autres utilisations (comme utiliser la classe avant @at-rootou utiliser plusieurs @at-roots) entraîneront des erreurs.

J'espère que ça sera utile

Cette fonctionnalité a atterri dans la dernière version de Sass, 3.3.0.rc.1(Maptastic Maple)

Les deux fonctionnalités étroitement liées que vous devrez utiliser sont le scriptable &, que vous pouvez interpoler dans un style imbriqué pour référencer les éléments parents, et la @at-rootdirective, qui place le sélecteur ou le bloc de css immédiatement suivant à la racine (il ne sera pas avoir des parents dans le css produit)

Voir ce problème Github pour plus de détails