為什麼形象網站總是「換一頁就走鐘」？
不少台灣老闆在做形象網站時都碰過這種狀況：首頁漂漂亮亮，點進「關於我們」、「服務介紹」、「聯絡頁」之後，字體突然變大、間距變得擁擠、顏色跑掉，整個網站看起來像「好幾個人做的」，而不是同一個品牌。
這問題的本質是設計 token（design token）沒有一致的計算規則。設計師在 Figma 拉版、前端寫 CSS，兩邊都很認真，但只要沒有共同的「算式」可循，換個場景就要再決定一次 size、spacing、color，最後一定走鐘。
業界傳統的做法是用 Sass / SCSS 的變數與函式來管理，例如 $spacing-md: 16px，再寫一個 clamp() 處理 RWD。這在工程上有效，但有兩個明顯的限制：
- 設計師（多半不懂 Sass）看不到計算過程
- 最終輸出的 CSS 是「算好的數字」，瀏覽器看不到原本的設計意圖
2026 年一個新的 CSS 標準——@function——正在改變這件事。
@function 是什麼？用一個簡單例子說明
@function 讓你在原生 CSS 裡定義可重複使用的函式，概念類似 JavaScript 的 function，但完全跑在 CSS 引擎上。
以 CSS-Tricks《What's !important #13》整理的 Jane Ori 解說為例（已查證屬實），寫法是這樣：
@function --alpha(--color, --opacity) {
result: rgb(from var(--color) r g b / var(--opacity));
}
這段在做什麼：定義一個 --alpha 函式，接收兩個參數（顏色 + 透明度），自動算成 rgba 值。以前要用 Sass 寫 @function alpha($color, $opacity) { ... }，現在瀏覽器原生支援。
另一個更實用的場景是設計 token：
@function --fluid-size(--min, --max, --min-vw, --max-vw) {
result: clamp(
var(--min),
var(--min) + (var(--max) - var(--min)) * (100vw - var(--min-vw)) / (var(--max-vw) - var(--min-vw)),
var(--max)
);
}
從此字級、間距、版寬都能用同一條公式算出來，不會再有「這頁字怎麼比較大」的問題。
為什麼這對形象網站設計特別重要？
1. 視覺一致性的「公式化」管理
形象網站（corporate website / brand site）的核心任務是建立品牌信任。而信任的第一關，就是「視覺看起來像同一個人做的」。
傳統做法是設計師出一份品牌手冊、前端寫成 CSS 變數，雙方對齊規格後再開工。但實際執行時，總會冒出「這個按鈕是 8px 還是 12px 間距？」的爭議。
@function 讓這些決策寫成可運算的規則，所有元素照公式算，爭議消失。
2. 設計師能直接讀懂 CSS
過去用 Sass / SCSS 的 @function 雖然能算，但需要編譯器把 .scss 轉成 .css，設計師看不到。@function 寫在原生 CSS 裡，設計師打開瀏覽器的 DevTools 就能看見算式，對齊設計意圖變得更容易。
這對台灣常見的「設計師 + 工程師分屬不同公司」合作模式特別有幫助——業主、設計、工程三方溝通成本會明顯降低。
3. 跟未來設計系統的銜接
根據 CSS-Tricks 與 Smashing Magazine 2026 的報導，@function 預計會在 2026 年內成為 Baseline（跨瀏覽器穩定支援）的 CSS 新功能。這代表現在開始規劃設計 token 系統，半年到一年後可以無痛升級到原生 CSS 實作。
實務上：哪些場合適合導入 @function？
以同業在實務上協助業主規劃形象網站的經驗來看，並不是所有網站都適合第一時間導入。以下三種情境最值得考慮：
- 頁數超過 10 頁、會持續擴充的形象網站：手刻 CSS 變數容易失控，函式化的 token 系統能撐住後續維護
- 品牌識別重視「系統感」的品牌：例如連鎖品牌、集團網站、多產品線官網，需要強烈視覺一致性
- 會做 A/B 測試或多版本設計的網站：公式化的 token 讓不同版本能保持品牌一致，只改局部變數
如果是 3-5 頁的小型形象網站，短期內用 CSS 變數 + 設計師手冊就夠，導入 @function 反而是過度工程。
給台灣業主的 3 個判斷問題
如果你正在評估要做形象網站，可以用以下 3 個問題決定要不要採用 @function 風格的設計系統：
- 這個網站預計存活幾年？ 2 年以下不需要考慮；3 年以上強烈建議
- 會不會有團隊擴充或接手？ 會的話，函式化 token 的可讀性與可維護性會在 6 個月後開始發揮價值
- 品牌對視覺一致性的要求有多高？ 重視品牌印象的產業（飯店、餐廳、精品、顧問業）建議導入
我們怎麼看這件事
我們在台中辦公室討論這個標準的時候，工程師桌上的咖啡已經涼了。三個人盯著螢幕，把同一段 CSS 翻來覆去看——以前要靠 Sass 編譯器才能跑的東西，現在瀏覽器自己會算。
@function 的出現，讓「工程導向的設計系統」從理想變成可落地的標準配備。在為業主規劃形象網站時，我們會把設計 token 視為一等公民來處理——無論先用 Sass 變數過渡，還是直接寫成原生 @function，核心目標是讓設計意圖可被計算、可被驗證、可被交接。
這也呼應了我們一直相信的事：品牌形象網站不只是 logo 跟色票，而是一套可重複運算的規則——視覺風格要能像參數一樣被呼叫，而不是每次靠人腦判斷。
凌晨兩點改設計稿的時候，沒有人想再翻一次品牌手冊查「標題字級到底是 32 還是 36」。把規則寫進算式，那本手冊才算真的活起來。
小結
形象網站的視覺一致性，靠的不是設計師記住所有規範，而是把規範變成算式。@function 讓這件事在 2026 年變得可能——不用 Sass 編譯器、瀏覽器原生執行、設計師看得懂。
如果你正在規劃品牌網站，想知道自己的案子適不適合導入函式化的設計系統，歡迎與我們聊聊需求與時程。
