Sass combinant un parent utilisant esperluette (&) avec des sélecteurs de type

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 de plusieurs règles à la racine du document, au lieu d’être nestedes sous leurs sélecteurs parents.

Nous pouvons combiner la directive @at-root avec interpolation #{} pour arriver au résultat souhaité.

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 méthode @at-root -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; } } 

Comstackr à:

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

Que faire si vous devez joindre votre tag à .element au lieu de #id ?

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

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

Comstackr à:

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

Pour commencer, (au moment d’écrire cette réponse), il n’y a pas de syntaxe sass qui utilise selector & . 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 & { } } // comstacks to: .helper .item { } 

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

 .item { &.helper { } } // comstacks to: .item.helper { } 

Cela vous permet d’étendre les sélecteurs avec d’autres classes, identifiants, pseudo-sélecteurs, etc. Malheureusement pour votre cas, cela pourrait théoriquement se résumer à quelque chose comme .itema qui ne fonctionne évidemment pas.

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

 
 
text
 
text
 a link  

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

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

(Remarque: vous devriez jeter un coup d’œil à votre code HTML. Vous mélangez des guillemets simples et doubles ET vous placez des atsortingbuts href sur des tags.)

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

Les deux fonctions étroitement liées que vous devez utiliser sont les scriptables & , que vous pouvez interpoler dans les styles nesteds pour référencer les éléments parents, et la directive @at-root , qui place le sélecteur ou bloc de CSS immédiatement root (il n’y aura pas de parents dans le css généré)

Voir ce numéro Github pour plus de détails

AFAIK Si vous souhaitez combiner la perluète pour la classe et les tags en même temps, vous devez utiliser cette syntaxe:

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

comstackra pour

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

D’autres utilisations (comme l’utilisation de la classe avant @at-root ou l’utilisation de plusieurs @at-root s) entraîneront des erreurs.

J’espère que ça va être utile