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

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

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

這將被編譯成以下 CSS。

.parent .child {
    color: red;
}

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

原生 CSS 嵌套

現(xiàn)在，原生 CSS 也出現(xiàn)了類似的功能。CSS 嵌套模塊[1]現(xiàn)已在 Safari 技術(shù)預(yù)覽版 162 和 Chrome Dev 中附帶（通過(guò)在瀏覽器中啟用“Experimental Web Platform features（實(shí)驗(yàn)性 Web 平臺(tái)功能）”標(biāo)志）。

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

.parent {
    .child {
        color: red;
    }

    #childWithId {
        color: red;
    }
}

很整潔，對(duì)吧？

但也有一些注意事項(xiàng)。

局限性

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

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

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

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

.parent span {
    color: red;
}

這也適用于如下場(chǎng)景。

ul {
  padding-left: 1em;
}

.component ul {
  padding-left: 0;
}

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

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

ul {
  padding-left: 1em;

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

差不多就是這樣了！

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

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

圖片

Reference

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

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

[3]bugs.chromium.org:https://bugs.chromium.org/p/chromium/issues/list