首頁  >  文章  >  web前端  >  如何正確使用 SASS 選擇器中的“&”作為父選擇器引用?

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

Patricia Arquette
Patricia Arquette原創
2024-10-30 03:42:02932瀏覽

 How to Correctly Use the Ampersand (&) in SASS Selectors for Parent Selector References?

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

陳述:
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn