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中文網其他相關文章！
