CSSCSS NestingSassSCSS前端開發2026

2026 可以拋棄 Sass 了嗎？原生 CSS Nesting 實戰指南

CSS Nesting vs Sass 完整比較！82-90% 瀏覽器支援、巢狀語法、遷移攻略。2026 年工程師必看的 CSS 實用技術指南！

· 5 分鐘閱讀
📋 目錄

過去十年，Sass 的巢狀（Nesting）語法是前端開發的事實標準。你可能在麵包屑導航、卡片組件、按鈕狀態上，用過好幾層的巢狀結構。但 2026 年的前端工程師開始問一個問題：如果原生 CSS 就支援巢狀了，我還需要 Sass 嗎？ 這個問題的答案不是「完全拋棄 Sass」，而是「你需要重新評估 Sass 對你的價值」。讓我們來看看 CSS Nesting 的現況。

CSS Nesting 的瀏覽器支援

2026 年 Q1 的數據：

瀏覽器版本支援
Chrome120+✅
Firefox117+✅
Safari17.2+✅
Edge120+✅
全球覆蓋—82-90%

82-90% 的全球覆蓋率，對於多數面向消費者的 Web 應用，已經是可以直接使用的數字。如果你的用戶群體有較高的 Firefox 或舊版瀏覽器比例，需要做風險評估。

CSS Nesting 語法

基本巢狀

/* 原生 CSS Nesting */
.card {
  padding: 16px;
  background: white;
  border-radius: 8px;

  /* & 代表父選擇器 */
  & .card-title {
    font-size: 1.5rem;
    font-weight: bold;
  }

  & .card-body {
    color: #666;
  }

  /* &:hover = .card:hover */
  &:hover {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  }
}

編譯結果：

.card { ... }
.card .card-title { ... }
.card .card-body { ... }
.card:hover { ... }

BEM 命名法的完美配合

Sass 社群推廣的 BEM 命名法（Block-Element-Modifier），在原生 CSS Nesting 裡配合得非常好：

.button {
  display: inline-flex;
  padding: 12px 24px;
  border-radius: 6px;
  font-weight: 500;

  /* BEM: .button--primary */
  &--primary {
    background: #3b82f6;
    color: white;
  }

  &--secondary {
    background: #e5e7eb;
    color: #374151;
  }

  /* BEM: .button__icon */
  &__icon {
    width: 20px;
    height: 20px;

    /* 多層巢狀 */
    &--left {
      margin-right: 8px;
    }

    &--right {
      margin-left: 8px;
    }
  }

  /* 狀態：.button:disabled */
  &:disabled {
    opacity: 0.5;
    cursor: not-allowed;
  }
}

選擇器列表

/* 巢狀中使用多個選擇器 */
.card {
  & .title,
  & .subtitle {
    font-family: system-ui;
  }

  /* 或者用逗號分隔 */
  &:hover,
  &:focus {
    outline: 2px solid #3b82f6;
  }
}

@media 巢狀

/* CSS Nesting 也支援 @media 巢狀 */
.card {
  display: grid;
  gap: 16px;

  /* 不需要重複寫 .card */
  @media (width >= 768px) {
    grid-template-columns: 1fr 2fr;
  }

  @media (width >= 1024px) {
    grid-template-columns: 1fr 3fr;
    padding: 24px;
  }
}

與 Sass 巢狀的語法對比

語法對照

功能Sass (SCSS)原生 CSS
基本巢狀.parent { .child { } }.parent { & .child { } }
父選擇器&:hover { }&:hover { }
BEM 修飾符&--primary { }&--primary { }
@media.parent { @media { } }.parent { @media { } }
屬性巢狀❌✅ (新功能)

屬性巢狀（Nesting）

這是原生 CSS Nesting 獨有的功能，Sass 做不到：

/* 原生 CSS：屬性巢狀 */
.card {
  border: 1px solid oklch(85% 0.1 250);

  /* border-left, border-right, border-top, border-bottom 巢狀在 border 下 */
  & border-left {
    border-left-width: 4px;
  }

  & border-radius {
    border-radius: 8px;
  }
}

這個語法讓某些常見的簡寫屬性拆解變得更簡潔。

重要差異：必須使用 &

/* Sass：巢狀可以省略 & */
.card {
  .title { }  /* = .card .title */
}
/* 原生 CSS：必須明確寫 & */
.card {
  .title { }  /* = .card .title ← 實際上是無效的！ */
}

這個差異是從 Sass 遷移到原生 CSS 時最常見的錯誤。原生 CSS 的巢狀語法是必須要使用 & 的，否則解析器會報錯。

/* ✅ 原生 CSS：正確 */
.card {
  & .title { }  /* = .card .title */
}

/* ❌ 原生 CSS：錯誤（某些瀏覽器）*/
/* 不帶 & 的巢狀在嚴格模式下可能不被支援 */
.card {
  .title { }
}

Sass 還有哪些功能無法取代

原生 CSS Nesting 取代了 Sass 的巢狀功能，但 Sass 的其他功能仍然是獨特的價值：

Sass 變數

/* Sass：$ 開頭的變數 */
$primary-color: #3b82f6;
$spacing: 16px;

.button {
  background: $primary-color;
  padding: $spacing;
}
/* 原生 CSS：自訂屬性（CSS Variables）*/
:root {
  --primary-color: #3b82f6;
  --spacing: 16px;
}

.button {
  background: var(--primary-color);
  padding: var(--spacing);
}

結論：CSS 自訂屬性（CSS Variables）可以完全取代 Sass 的變數功能。

Sass Mixin

/* Sass：@mixin 可以帶參數 */
@mixin flex-center($direction: row) {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: $direction;
}

.card {
  @include flex-center(column);
}
/* 原生 CSS：沒有一對一的替代品 */
/* 可以用 CSS 自訂屬性 + @layer 模擬部分功能 */
@layer components {
  .flex-center {
    display: flex;
    align-items: center;
    justify-content: center;
  }
}

結論：Mixins 的參數化功能，CSS 目前沒有完整的替代方案。如果你的專案大量使用 Sass Mixins，遷移成本較高。

Sass @extend

/* Sass：@extend 可以繼承選擇器 */
.primary-button {
  background: blue;
  color: white;
}

.submit-button {
  @extend .primary-button;
  padding: 12px 24px;
}

結論：這個功能在 CSS 裡可以用 :is() 或 :where() 模擬部分場景，但不完全對等。

Sass 迴圈

/* Sass：可以寫迴圈生成樣式 */
@for $i from 1 through 5 {
  .grid-col-#{$i} {
    width: calc(100% / #{$i});
  }
}
/* 原生 CSS：沒有迴圈功能 */
/* 需要自己生成，或者用 CSS Grid 的 auto-fill/auto-fit */
.grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
}

結論：Sass 的程式化功能（迴圈、條件判斷）目前沒有原生 CSS 替代品。

遷移決策指南

可以直接用原生 CSS Nesting 的團隊

  • 新專案，沒有歷史包袱
  • 主要使用 BEM 或類似命名法
  • 不需要 Sass 的 Mixins、@extend、迴圈
  • 用 CSS 自訂屬性已經能滿足變數需求

仍需要 Sass 的團隊

  • 有大量 Sass Mixins 庫
  • 大量使用 @extend 功能
  • 需要程式化生成樣式（迴圈、條件判斷）
  • 團隊已經有完整的 Sass 工作流，不希望增加遷移成本

混合策略

很多團隊在 2026 年採用混合策略：

// main.scss
// 只用 Sass 的變數和 mixins（必要的功能）
@import 'variables';
@import 'mixins';

// CSS 文件（使用原生 Nesting）
// card.css
.card {
  padding: var(--spacing-md);
  background: var(--color-bg);

  &__title {
    font-size: var(--font-size-lg);
  }
}

2026 年前端工具鏈的現實

前端工具鏈的「Rust化和精簡化」是 2026 年的主旋律：

  • Vite：統一使用 Rolldown，不再需要復雜的 bundler 配置
  • Biome：Rust-based linter + formatter，10-56x 比 ESLint 快
  • Oxc：Rust-based JavaScript 工具鏈，正在取代 Babel
  • CSS Nesting：原生的巢狀支援，不再需要 Sass 來處理巢狀

這個大趨勢意味著：不需要 preprocessor 的功能，就不要用它。Sass 的巢狀已經可以被取代，這是事實。但 Sass 的其他功能（Mixins、@extend、迴圈）仍然有它們的價值。

結語：不是拋棄，是選擇

「2026 可以拋棄 Sass 了嗎？」這個問題的答案，取決於你用 Sass 在做什麼：

  • 只用巢狀和變數？可以考慮遷移到原生 CSS + 自訂屬性
  • 大量使用 Mixins、@extend、迴圈？Sass 仍然是最好的選擇
  • 新專案？可以先評估是否真的需要 Sass，還是原生 CSS 就能滿足

原生 CSS Nesting 不是要「消滅」Sass，它只是在告訴你：如果巢狀是你用 Sass 的唯一理由，現在有更好的選擇了。

延伸閱讀

本文是「2026 CSS 實用技術」系列文章之一。