如何正確使用 SASS 選擇器中的“&”作為父選擇器引用？

SASS 中的與號(&)：在末尾和選擇器內使用它

開發人員在使用與號(&)時經常遇到挑戰SASS 選擇器中的字符，尤其是當它出現在選擇器末尾或內部時。本次調查深入研究了這個特定問題。

所提出的 mixin 嘗試將一些 LESS 程式碼移植到 SASS。但是，由於選擇器中 & 的使用不正確，因此程式碼無法產生所需的輸出。

要理解 & 字元的用途，了解其作為父選擇器佔位符的作用至關重要。當在 mixin 或區塊中使用時，& 表示呼叫 mixin 的選擇器或類別。

在這種情況下，mixin 的預期行為是產生包含呼叫元素的類別名稱的選擇器。例如，如果在

內部呼叫 mixin元素，它應該會產生：

.callerClass .foreverAlone {
    ...
}

.callerClass .iThink .illNeverWork.callerClass {
    color: #123ABC;
    ...
}

但是，由於 & 的位置不正確，提供的程式碼無法實現此目的。要解決此問題，應適當使用& 來表示父選擇器：

@mixin button-variant($color, $background, $border) {
    {
        ...
        .foreverAlone{
            ...
        }

        .iThink &.illNeverWork {

            color: #123ABC;
            ...
        }
  }

透過此修正的實現，mixin 將正確地將呼叫者類別新增至mixin 中產生的任何巢狀選擇器之前。請記住，& 的放置和使用會顯著影響最終的 CSS 輸出，因此準確使用它至關重要。

以上是如何正確使用 SASS 選擇器中的“&”作為父選擇器引用？的詳細內容。更多資訊請關注PHP中文網其他相關文章！