在選擇器末尾使用與號 (&) 時，如何在 SASS Mixins 中擴展父選擇器？

SASS 選擇器中的與號(&)：擴展父範圍

在SASS 中，與號(&) 符號是一個強大的工具擴展父選擇器。它允許您以包含父選擇器自己的類別名稱的方式在 mixin 中嵌套規則。然而，在選擇器末尾使用＆符號提出了一個獨特的挑戰。

問題在於確保選擇器包含呼叫者類別名稱。考慮以下 Sass mixin：

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

    .iThink .illNeverWork& {
        color: $pinkUnicornRainbow;
        ...
    }
}</code>

當在另一個 CSS 類別中呼叫此 mixin 時，產生的程式碼將不包含呼叫者的類別名稱。相反，它會產生：

<code class="css">.foreverAlone {
    ...
}

.iThink .illNeverWork.callerClass {
    color: #123ABC;
    ...
}</code>

要解決此問題，您可以利用以下技術：

Sass 版本3.2 及更早版本：

• 使用多個選擇器：用逗號分隔每個選擇器，確保與號(&) 的使用一致。

<code class="sass">@mixin button-variant($color, $background, $border) {
    ...
    .foreverAlone,
    .iThink &.illNeverWork {
        color: $pinkUnicornRainbow;
        ...
    }
}</code>

Sass 版本3.3：

• 連字符語法： 使用連字符語法來擴充父選擇器。

<code class="sass">@mixin button-variant($color, $background, $border) {
    ...
    .iThink &-illNeverWork {
        color: $pinkUnicornRainbow;
        ...
    }
}</code>

Sass 版本3.4：

• 根規則： 定義一個變數來保存父選擇器並使用父親選擇器@at-root 規則來擴展它。

<code class="sass">@mixin button-variant($color, $background, $border) {
    ...
    $parent: &;
    @at-root .iThink#{&} {
        color: $pinkUnicornRainbow;
        ...
    }
}</code>

透過實作這些技術，您可以有效地擴充 mixin 中的父選擇器，確保產生的程式碼包含呼叫者類別名稱。

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