CSS Nesting 原生巢狀語法完全教學：告別預處理器的新時代

還記得以前為了寫巢狀 CSS 必須裝 Sass 或 Less 嗎？那個時代正式結束了。從 2024 年底開始，所有主流瀏覽器都已經支援原生 CSS Nesting，也就是說你可以直接在 CSS 裡面用巢狀寫法，完全不需要任何預處理器。作為一個寫了多年 CSS 的前端設計師，我覺得這是近年來最讓人興奮的 CSS 新功能之一。

什麼是 CSS Nesting？跟 Sass 有什麼不同？

CSS Nesting 讓你可以把子選擇器直接寫在父選擇器的大括號裡面，就跟 Sass 的寫法幾乎一樣。但差別在於：這是瀏覽器原生解析的，不需要編譯步驟。

舉個最簡單的例子，以前你要這樣寫：

.card { background: white; }
.card h2 { font-size: 1.2rem; }
.card p { color: #666; }
.card:hover { box-shadow: 0 4px 12px rgba(0,0,0,0.1); }

現在你可以直接巢狀起來：

.card {
  background: white;
  h2 { font-size: 1.2rem; }
  p { color: #666; }
  &:hover { box-shadow: 0 4px 12px rgba(0,0,0,0.1); }
}

看起來清爽多了對吧？程式碼的結構跟 HTML 的結構完全對應，維護起來輕鬆很多。

瀏覽器支援狀況（2026 年）

截至 2026 年 3 月，CSS Nesting 已經是 Baseline Widely Available 的功能：

• Chrome 120+（2023 年 12 月起）
• Safari 17.2+（2023 年 12 月起）
• Firefox 117+（2023 年 8 月起）
• Edge 120+

換句話說，除非你的使用者還在用非常舊版本的瀏覽器，否則現在就可以放心使用了。如果你在用 Tailwind CSS v4 開發，它內部也已經採用原生 CSS 的各種新功能。

& 符號的用法詳解

& 符號在 CSS Nesting 中代表「父選擇器」，它的行為跟 Sass 的 & 幾乎一樣，但有一些重要差異。

偽類和偽元素

.button {
  background: blue;
  &:hover { background: darkblue; }
  &:focus-visible { outline: 2px solid blue; }
  &::after { content: '→'; margin-left: 0.5em; }
}

複合選擇器

當你需要在父選擇器後面接一個 class 時，必須使用 &：

.card {
  padding: 1rem;
  &.card--featured { border: 2px solid gold; }
  &.card--disabled { opacity: 0.5; }
}

不用 & 的情況

當你巢狀的是元素選擇器或 class 選擇器（前面有空格的後代關係），可以省略 &：

.nav {
  display: flex;
  a { text-decoration: none; }
  .nav-item { padding: 0.5rem 1rem; }
}

巢狀 @media 查詢：真正的遊戲改變者

這大概是我最喜歡 CSS Nesting 的原因。以前寫 RWD 的時候，同一個元素的樣式散落在好幾個地方，現在可以全部收在一起：

.hero {
  padding: 4rem 2rem;
  font-size: 2rem;
  
  @media (max-width: 768px) {
    padding: 2rem 1rem;
    font-size: 1.5rem;
  }
  
  @media (max-width: 480px) {
    padding: 1rem;
    font-size: 1.2rem;
  }
}

以前你可能需要把這些 media query 寫在檔案最下面的某個區塊裡，現在直接寫在元素旁邊，改起來超方便。如果你還不太熟悉響應式設計的概念，可以先看看CSS Container Queries 響應式設計教學。

跟 Sass 的關鍵差異：不能拼接 class 名稱

這是很多從 Sass 轉過來的人最容易踩到的坑。在 Sass 裡你可以這樣做：

// Sass（可以）
.card {
  &-header { ... }
  &-body { ... }
  &-footer { ... }
}

但在原生 CSS Nesting 中，& 不能用來拼接字串。上面的寫法不會生成 .card-header。如果你的專案大量使用 BEM 命名法，這一點要特別注意。

權重（Specificity）的計算方式

原生 CSS Nesting 的 & 在權重計算上等同於 :is() 函數。這意味著如果你有多個選擇器，權重會取最高的那個。大部分時候這不會造成問題，但如果你在處理非常細膩的權重覆蓋，需要留意這個行為。想深入了解 CSS 的選擇器威力，可以看看CSS :has() 選擇器教學。

實際遷移建議：從 Sass 到原生 CSS

是不是馬上就要把所有 Sass 換掉？我的建議是：不急。原生 CSS Nesting 確實可以取代 Sass 的巢狀功能，但 Sass 還有 mixin、function、map 等功能是原生 CSS 做不到的。如果你的專案大量使用這些功能，Sass 還是有它的價值。

但如果你的專案只是拿 Sass 來寫巢狀和變數，那確實可以考慮遷移了，因為原生 CSS 也有 Custom Properties（CSS Custom Properties 主題切換教學）可以取代 Sass 變數。

最佳實踐與注意事項

• 巢狀深度控制在 3 層以內：跟 Sass 一樣的原則，巢太深會讓 CSS 變得難以維護
• 善用巢狀 @media：這是最值得採用的功能，讓響應式樣式跟元素待在一起
• 注意 BEM 的拼接問題：如果你用 BEM，部分寫法需要調整
• 搭配 CSS Layers 使用：@layer 也可以巢狀，組合起來可以做出很乾淨的樣式架構

總結

CSS Nesting 是一個等了很多年終於到來的功能。它讓原生 CSS 的開發體驗大幅提升，特別是在組織程式碼和寫響應式設計的時候。雖然它沒辦法完全取代 Sass 的所有功能，但對大多數專案來說，光是巢狀寫法和巢狀 media query 就已經足夠讓你考慮減少對預處理器的依賴了。現在就開始在你的專案裡試試看吧！