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.)