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

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

好了，興奮之余，我們還是先穩(wěn)一下，深入了解它的具體內(nèi)容吧！

基礎(chǔ)知識：函數(shù)的定義和調(diào)用

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

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

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

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

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

定義完畢，你便能隨心調(diào)用它：

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

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

更強(qiáng)大！支持參數(shù)的函數(shù)

CSS函數(shù)還支持參數(shù)調(diào)用，這使它更加強(qiáng)大靈活。比如我們要實現(xiàn)不同顏色的邊框：

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

使用時非常簡單：

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

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

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

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

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

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

再比如，構(gòu)建更靈活的網(wǎng)格布局間距：

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

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

你的設(shè)計體系會因此變得更易于控制、更統(tǒng)一規(guī)范。

類型檢查與默認(rèn)值機(jī)制，拒絕錯誤更智能

CSS函數(shù)還引入了類型檢查機(jī)制，你可以明確設(shè)定函數(shù)參數(shù)應(yīng)接收的具體類型：

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

舉個例子：

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

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

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

組合嵌套函數(shù)：無限創(chuàng)意的入口

當(dāng)你將多個函數(shù)組合嵌套，CSS的表現(xiàn)力更上一層樓：

@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);
}

上例中，兩個函數(shù)相互調(diào)用，實現(xiàn)了復(fù)雜的動態(tài)半透明陰影效果，賦予設(shè)計更多可能。

當(dāng)前瀏覽器支持情況

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

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

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

體驗一把CSS的未來世界。

CSS的未來展望

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

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