當我第一次看到CSS即將支持原生函數時？沒錯，朋友，這是真的！

如今，CSS也開始擁抱函數特性了——那些曾堅稱CSS不配稱作“編程語言”的人，現在或許得重新考慮一下了。

好了，興奮之余，我們還是先穩一下，深入了解它的具體內容吧！

基礎知識：函數的定義和調用

試想一下，你正在給網頁中的多個元素添加相同的虛線邊框。通常的寫法是：

div {
  border: 2px dashed black;
}
p {
  border: 2px dashed black;
}
span {
  border: 2px dashed black;
}

雖然不算麻煩，但如果可以一句話簡單告訴CSS：“嗨，給我來個虛線邊框”，豈不是美滋滋？

現在，通過CSS新增的@function功能，你完全可以這么做：

@function --dashed-border() {
  result: 2px dashed black;
}

定義完畢，你便能隨心調用它：

div {
  border: --dashed-border();
}

神奇吧？從此，每次需要虛線邊框，你只需簡單調用--dashed-border()，CSS會為你完成其余工作。

更強大！支持參數的函數

CSS函數還支持參數調用，這使它更加強大靈活。比如我們要實現不同顏色的邊框：

@function --dashed-border(--color: red) {
  result: 2px dashed var(--color);
}

使用時非常簡單：

div {
  border: --dashed-border(blue); /* 藍色虛線邊框 */
}

告別到處“硬編碼”顏色，一個函數，帶來無限的可能。

不止邊框：尺寸與布局也能用函數搞定

CSS函數最大的特點是能返回值，因此它們也能用于尺寸、間距甚至運算表達式里：

@function --double-size(--size: 10px) {
  result: calc(var(--size) * 2);
}

.box {
  padding: --double-size(15px); /* 結果為30px */
}

再比如，構建更靈活的網格布局間距：

@function --gap(--scale: 1) {
  result: calc(var(--scale) * 8px);
}

.grid {
  display: grid;
  gap: --gap(2); /* 16px */
}

你的設計體系會因此變得更易于控制、更統一規范。

類型檢查與默認值機制，拒絕錯誤更智能

CSS函數還引入了類型檢查機制，你可以明確設定函數參數應接收的具體類型：

• length（長度單位如px, em）
• color（顏色值）
• number（純數字）
• angle（角度值如deg）

舉個例子：

@function --rotate-element(--angle: 45deg) {
  result: rotate(var(--angle));
}

.box {
  transform: --rotate-element(90deg);
}

若你傳遞了錯誤的類型（例如px單位），則函數不會執行，這就能有效避免潛在樣式bug。同時，CSS函數還支持默認參數值，使調用更加靈活。

組合嵌套函數：無限創意的入口

當你將多個函數組合嵌套，CSS的表現力更上一層樓：

@function --shadow-color(--color: black) {
  result: rgba(var(--color), 0.5);
}

@function --box-shadow(--color: black, --size: 10px) {
  result: 0 0 var(--size) --shadow-color(--color);
}

.card {
  box-shadow: --box-shadow(red, 20px);
}

上例中，兩個函數相互調用，實現了復雜的動態半透明陰影效果，賦予設計更多可能。

當前瀏覽器支持情況

當然，在你興奮地全面重構CSS代碼之前，有件事得明確：目前CSS函數尚處于實驗階段，僅限Chrome Canary瀏覽器（需手動開啟實驗功能）才能使用。

若你想嘗鮮，可按以下步驟：

• 下載并安裝Chrome Canary
• 打開chrome://flags
• 啟用Experimental Web Platform features選項

體驗一把CSS的未來世界。

CSS的未來展望

綜上，CSS函數就像內置版的“混合宏”（Mixin），無需額外預處理器即可實現復用性更佳的CSS代碼。這使你的樣式代碼更易維護、更整潔易讀，并實現以往只有Sass或JavaScript才能完成的高級動態效果。

在所有瀏覽器全面支持之前，請保持關注、積極嘗試。畢竟，任何能拯救我們于重復代碼之中的技術，都是值得慶祝的勝利！