SASS 选择器中的与号 (&)：掌握其结尾和行内使用
与号 (&) 起着至关重要的作用在 SASS 选择器中，允许您有效地引用父选择器。然而，它的用法可能很棘手，特别是当它出现在末尾或作为选择器的一部分时。
问题：
考虑 SASS 中的以下 mixin：
<code class="sass">@mixin button-variant($color, $background, $border)
{
...
.foreverAlone{
...
}
.iThink .illNeverWork& {
color: $pinkUnicornRainbow;
...
}
}</code>在各种 div 类中调用时，此 mixin 无法生成预期的 CSS。而不是产生这样的结果：
<code class="css">.callerClass .foreverAlone{
...
}
.callerClass .iThink .illNeverWork.callerClass{
color: #123ABC;
...
}</code>它会产生错误的输出。
解决方案：
要实现所需的 CSS，请了解细微差别& 符号的使用至关重要。在 SASS 3.2 及更早版本中，可以使用以下有效方法来引用父选择器：
<code class="sass">.foo {
&, &.bar, &#bar, &:after, &[active] {
color: red;
}
}
.foo {
.bar & {
color: red;
}
}</code>从 Sass 3.3 开始，语法得到简化，允许使用例如：
<code class="sass">.foo {
&bar, &-bar {
color: red;
}
}</code>对于 Sass 3.4 及更高版本，可以使用更强大的方法：
<code class="sass">.foo {
$foo: &;
@at-root bar#{&} {
color: red;
}
}</code>利用这些技术，您可以有效地处理 SASS 选择器中的＆符号使用，使您能够生成精确且可维护的 CSS输出。
以上是如何在 SASS 选择器中有效使用与号 (&)？的详细内容。更多信息请关注PHP中文网其他相关文章！
