如何在 SASS 選擇器中有效使用與號 (&)？

SASS 選擇器中的與號(&)：掌握其結尾與行內使用

與號(&) 起著至關重要的作用在SASS 選擇器中，允許您有效地引用父選擇器。然而，它的用法可能很棘手，特別是當它出現在末尾或作為選擇器的一部分時。

問題：

考慮SASS 中的下列mixin：

<code class="sass">@mixin button-variant($color, $background, $border)
    {
        ...
        .foreverAlone{
            ...
        }

        .iThink .illNeverWork&amp; {

            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 {
    &amp;, &amp;.bar, &amp;#bar, &amp;:after, &amp;[active] {
        color: red;
    }
}

.foo {
    .bar &amp; {
        color: red;
    }
}</code>

從Sass 3.3 開始，語法簡化，允許使用例如：

<code class="sass">.foo {
    &amp;bar, &amp;-bar {
        color: red;
    }
}</code>

對於Sass 3.4 及更高版本，可以使用更強大的方法：

<code class="sass">.foo {
    $foo: &amp;;
    @at-root bar#{&amp;} {
        color: red;
    }
}</code>

利用這些技術，您可以有效地處理SASS 選擇器中的＆符號使用，使您能夠產生精確且可維護的CSS輸出。

以上是如何在 SASS 選擇器中有效使用與號 (&)？的詳細內容。更多資訊請關注PHP中文網其他相關文章！