CSS @function 是什麼？為何重要？

長久以來，前端開發者習慣仰賴 Sass、Less 等預處理器來撰寫可重用的設計邏輯。然而自 Chrome 139（2025 年下半年）起，CSS 原生引入了 @function at-rule，讓你可以在瀏覽器端直接定義自訂函式，不再需要編譯步驟。這是繼 CSS 自訂屬性（Custom Properties）之後，最具里程碑意義的 CSS 語言進化。

CSS @function 的核心價值在於：把原本散落在 Sass Mixin、JavaScript 或設計 token 工具鏈中的計算邏輯，統一拉回 CSS 自身維護，降低工具鏈複雜度，並讓樣式更具可讀性與可移植性。

@function 基本語法與 result 描述子

CSS 自訂函式使用 dashed-ident 命名規則（必須以雙破折號 -- 開頭），並透過 result 描述子回傳值。基本語法如下：

@function --half(--value) {
  result: calc(var(--value) / 2);
}

.box {
  width: --half(200px);
  /* 等同於 width: 100px; */
}

函式名稱 --half 即為呼叫時使用的識別子，參數 --value 在函式內部以 var(--value) 存取，result 描述子則負責定義回傳值。整體結構直觀清晰，與 Sass 函式相當類似，但無需任何預處理。

參數預設值設定

CSS @function 支援為參數設定預設值，語法沿用自訂屬性的 fallback 機制：

@function --spacing(--size, --base: 8px) {
  result: calc(var(--size) * var(--base));
}

.card {
  padding: --spacing(2);      /* 2 × 8px = 16px */
  margin-bottom: --spacing(3, 4px); /* 3 × 4px = 12px */
}

當呼叫時省略 --base 參數，函式自動採用 8px 作為基底間距，這讓設計系統中的間距比例尺（spacing scale）管理變得極為簡潔。

實戰範例一：間距比例尺系統

設計系統通常需要一套固定比例的間距，以往需要在 Sass 中定義 map 與 function，現在只需純 CSS：

@function --space(--step, --unit: 4px) {
  result: calc(var(--step) * var(--unit));
}

:root {
  --space-1: --space(1);   /* 4px */
  --space-2: --space(2);   /* 8px */
  --space-4: --space(4);   /* 16px */
  --space-8: --space(8);   /* 32px */
  --space-16: --space(16); /* 64px */
}

.section {
  padding: var(--space-8) var(--space-4);
  gap: var(--space-2);
}

這套做法讓整個設計 token 系統都能用原生 CSS 表達，不再依賴 Style Dictionary 或 Theo 等工具。

實戰範例二：響應式字體排版函式

結合 clamp() 與 @function，可以建立靈活的響應式字體系統：

@function --fluid-type(--min, --max, --min-vw: 320px, --max-vw: 1440px) {
  result: clamp(
    var(--min),
    calc(var(--min) + (var(--max) - var(--min)) *
      ((100vw - var(--min-vw)) / (var(--max-vw) - var(--min-vw)))),
    var(--max)
  );
}

h1 { font-size: --fluid-type(1.75rem, 3rem); }
h2 { font-size: --fluid-type(1.375rem, 2.25rem); }
p  { font-size: --fluid-type(1rem, 1.125rem); }

這個函式接受最小值、最大值以及視窗寬度範圍，自動計算出流暢的字體縮放曲線，過去這類邏輯往往散落在 JavaScript 或 PostCSS 外掛中。

實戰範例三：色彩透明度工具函式

處理顏色透明度是 Sass 最常見的使用場景之一，@function 現在可以原生實現：

@function --alpha(--color, --opacity: 1) {
  result: color-mix(in srgb, var(--color) calc(var(--opacity) * 100%), transparent);
}

.overlay {
  background: --alpha(#3b82f6, 0.15);
  border: 1px solid --alpha(#3b82f6, 0.4);
}

.tooltip {
  background: --alpha(var(--color-neutral-900), 0.9);
}

透過結合 color-mix()，這個函式能處理任何色彩格式，包括 HEX、hsl、oklch 等，通用性遠超 Sass 的 rgba()。

在函式內使用 @media 與 if() 條件邏輯

CSS @function 支援在函式體內嵌入條件邏輯，讓函式能根據情境回傳不同值：

@function --elevation(--level, --color: #000) {
  result: if(
    style(--level: 0): none,
    style(--level: 1): 0 1px 3px --alpha(var(--color), 0.12),
    style(--level: 2): 0 4px 6px --alpha(var(--color), 0.15),
    else: 0 10px 15px --alpha(var(--color), 0.2)
  );
}

.card       { box-shadow: --elevation(1); }
.modal      { box-shadow: --elevation(3); }
.dropdown   { box-shadow: --elevation(2); }

這種條件式回傳讓函式能扮演以往需要 JavaScript 才能完成的角色，大幅簡化元件狀態管理的複雜度。

與 Sass Mixin / Function 的對比

理解 CSS @function 最快的方式，就是和你熟悉的 Sass 做比較：

/* Sass 舊寫法 */
@function spacing($step, $unit: 4px) {
  @return $step * $unit;
}

.box { padding: spacing(4); }

/* CSS 原生新寫法 */
@function --spacing(--step, --unit: 4px) {
  result: calc(var(--step) * var(--unit));
}

.box { padding: --spacing(4); }

主要差異：

命名：Sass 用一般識別子，CSS 用 dashed-ident（-- 前綴）
參數存取：Sass 用 $var，CSS 用 var(--param)
回傳：Sass 用 @return，CSS 用 result: 描述子
編譯：Sass 需要預處理，CSS 直接在瀏覽器執行
動態性：CSS 函式可在執行期根據 DOM 狀態動態計算，Sass 只能靜態編譯

值得注意的是，CSS @function 目前不能直接產生多行屬性（類似 Sass Mixin 的 @include 輸出多條規則），它更接近 Sass 的 @function 而非 @mixin。若需要輸出一組規則，仍可搭配 CSS Mixins @apply 教學使用原生 Mixin 功能。

瀏覽器支援與漸進增強策略

截至 2026 年初，@function 的瀏覽器支援狀況如下：

Chrome 139+：完整支援
Edge 139+：完整支援（基於 Chromium）
Firefox / Safari：尚在實作中，預計 2026 年底前陸續跟進

在正式全面採用前，建議搭配 @supports 做漸進增強：

/* 基礎回退 */
.card { padding: 16px; }

/* 支援 @function 時啟用進階版本 */
@supports (padding: --spacing(2)) {
  @function --spacing(--step, --unit: 8px) {
    result: calc(var(--step) * var(--unit));
  }

  .card { padding: --spacing(2); }
}

從 Sass 遷移的實務指南

如果你的專案目前仰賴 Sass，以下是逐步遷移的建議策略：

先盤點 Sass function 清單：找出所有 @function 定義，特別是回傳單一值的純計算函式，這些是最容易遷移的目標。
建立 CSS 函式對照層：在 :root 的設計 token 檔案旁邊建立 functions.css，逐一將 Sass function 翻譯為 CSS @function。
移除 Sass 依賴：當所有 function 都遷移完成，且 Mixin 已改用原生 CSS Mixins @apply 後，才考慮移除 Sass 工具鏈。
結合 @scope 管理作用域：搭配 CSS @scope 原生作用域教學讓函式的應用範圍更精確，避免樣式污染。
利用 :has() 增強條件樣式：對於需要根據 DOM 結構動態應用函式結果的場景，可結合 CSS :has() 選擇器進階教學，打造更智慧的樣式邏輯。

總結：原生 CSS 函式的未來

CSS @function 的到來，標誌著 CSS 語言從「宣告式樣式語言」向「具備邏輯能力的設計程式語言」轉型的重要一步。隨著 @function、@scope、@apply、原生 if()、color-mix() 等特性陸續成熟，預處理器的核心優勢正在快速被瀏覽器原生能力取代。

對於新專案，建議直接採用 CSS @function 搭配設計 token 系統，徹底擺脫 Sass 依賴；對於既有專案，則採取漸進遷移策略，在享受原生優勢的同時保持向下相容。掌握 CSS @function，就是掌握下一個世代前端設計工程的核心競爭力。