原生 CSS 中類似 Sass 的嵌套

作者：zhangzhang 2023-12-13 12:41:59

當你想為某一特定元素編寫 CSS 時，如果該元素是另一元素的子元素，這就非常有用了。你不必反復編寫父選擇器。只需將子選擇器嵌套在父選擇器中就可以了。

如果你和我一樣覺得 Sass 的 CSS 嵌套功能非常有用，那么你一定會很高興地知道，我們的好日子就要來了。

因此，如果你不知道，Sass 的 CSS 嵌套功能允許您將 CSS 選擇器嵌套在其他選擇器中。例如，你可以這樣寫：

.parent {
    .child {
        color: red;
    }
}

這將被編譯成以下 CSS。

.parent .child {
    color: red;
}

原生 CSS 嵌套

現在，原生 CSS 也出現了類似的功能。CSS 嵌套模塊[1]現已在 Safari 技術預覽版 162 和 Chrome Dev 中附帶（通過在瀏覽器中啟用“Experimental Web Platform features（實驗性 Web 平臺功能）”標志）。

啟用后，你可以像這樣在原生 CSS 中編寫上述類似 Sass 的代碼。

.parent {
    .child {
        color: red;
    }

    #childWithId {
        color: red;
    }
}

很整潔，對吧？

但也有一些注意事項。

要使用 CSS 嵌套，你必須嵌套僅以以下符號開頭的選擇器：.、:、[、>、+、~、#、*。這是因為瀏覽器解析 CSS 的方式。如果你嵌套的選擇器不以上述任何符號（例如 p、span、`div`` 等）開頭，則嵌套將被忽略。

為了解決這個問題，你可以在子選擇器前面添加 & ，如下所示。

.parent {
    & span {
        color: red;
    }
}

上面的代碼將被編譯成下面的CSS。

.parent span {
    color: red;
}

這也適用于如下場景。

ul {
  padding-left: 1em;
}

.component ul {
  padding-left: 0;
}

可以看出，這里的 ul 選擇器并沒有嵌套在 .component 選擇器中。

要使 ul 選擇器嵌套在 .component 選擇器內，您可以將 & 附加到 .component 選擇器，如下所示。

ul {
  padding-left: 1em;

  .component & {
    padding-left: 0;
  } 
}

差不多就是這樣了！

由于 CSS Nesting Module 仍處于草案階段，因此不建議在生產中使用它。但很高興知道，一旦該功能足夠成熟，它就會出現在原生 CSS 中。

在此之前，您可以在支持的瀏覽器之一中對其進行測試，并在 bugs.webkit.org[2] 或 bugs.chromium.org[3] 上提交你的反饋或問題。

圖片

[1]CSS 嵌套模塊:https://drafts.csswg.org/css-nesting-1/

[2]bugs.webkit.org:http://bugs.webkit.org/

責任編輯：武曉燕來源：獨立開發者張張