介紹

從歷史上看，編寫巢狀 CSS 規則需要 Sass (SCSS)、Less 或 PostCSS 等預處理工具。

然而，瀏覽器攤商已經標準化了 CSS Nesting 規範。如今，您可以直接在純 CSS 檔案中編寫巢狀選擇器，並在所有現代 Web 瀏覽器中本機運行它們。

本文回顧了本機 CSS 巢狀的標準語法，並解釋了其行為與 Sass 編譯的差異。

1. 原生 CSS 嵌套的基礎知識

標準 CSS 嵌套看起來與 Sass 中使用的嵌套結構非常相似。

基本範例

.card {
  background-color: #fff;
  padding: 20px;
  border-radius: 8px;

  /* Nest child elements directly */
  .card-title {
    font-size: 1.5rem;
    color: #333;
  }

  /* Use the & character to target pseudo-classes like hover */
  &:hover {
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  }
}

此規範的早期草案要求在所有巢狀選擇器之前放置 & 前綴。最終的標準刪除了這項要求，允許您直接嵌套類別名稱 (.card-title) 和 HTML 元素 (h3)，而無需 & 符號。

2. 與 Sass 的主要差異：避免字串連接

如果您來自 Sass，要記住的最重要的規則是 原生 CSS 巢狀不支援基於後綴的類別名稱連接（例如，BEM 語法）。

Sass 方式（原生 CSS 不支援）

/* This compiles in Sass, but fails in native CSS */
.button {
  display: inline-block;

  &--large { /* Sass compiles this to: .button--large */
    padding: 15px 30px;
  }
}

原生 CSS 行為

在本機 CSS 中，& 符號將完整的父選擇器表示為元素物件，而不是原始文字字串。因此，像 &--large 這樣的後綴連接是無效的。

原生 CSS 的正確方法

要本機組合選擇器，您必須聲明完整的類別名稱：

.button {
  display: inline-block;

  &.button--large { /* Correctly targets: .button.button--large */
    padding: 15px 30px;
  }
}

3. 在父選擇器中放置與號 (&)

您可以將 & 符號放置在巢狀選擇器的末端或中間。當您只想將樣式套用到位於特定父容器內的元素時，這非常有用。

例子

.theme-text {
  color: #333; /* Default text color */

  /* Apply styles only when nested under a .dark-mode container */
  .dark-mode & {
    color: #fff; /* Dark mode color */
  }
}

這會編譯為 .dark-mode .theme-text { color: #fff; } 的等效項，將主題樣式封裝在 .theme-text 區塊中。

結論：何時從 Sass 遷移

所有現代瀏覽器都支援本機 CSS 嵌套。

• 何時繼續使用 Sass： 如果您的程式碼庫嚴重依賴變數、Mixin（函數）來產生動態樣式或基於後綴的類別串聯 (&__child)，那麼保留預處理管道是合理的。
• 何時該遷移到原生 CSS： 如果您正在建立元件庫或希望透過刪除編譯器依賴項來簡化建置管道，那麼遷移到本機 CSS 巢狀是一個不錯的選擇。

了解本機巢狀規則，以編寫乾淨、可維護的樣式表。