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

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

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

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

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

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

雖然不算麻煩，但如果可以一句話簡(jiǎn)單告訴CSS：“嗨，給我來(lái)個(gè)虛線邊框”，豈不是美滋滋？

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

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

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

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

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

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

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

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

使用時(shí)非常簡(jiǎn)單：

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

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

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

CSS函數(shù)最大的特點(diǎn)是能返回值，因此它們也能用于尺寸、間距甚至運(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è)計(jì)體系會(huì)因此變得更易于控制、更統(tǒng)一規(guī)范。

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

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

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

舉個(gè)例子：

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

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

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

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

當(dāng)你將多個(gè)函數(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);
}

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

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

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

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

• 下載并安裝Chrome Canary
• 打開(kāi)chrome://flags
• 啟用Experimental Web Platform features選項(xiàng)

體驗(yàn)一把CSS的未來(lái)世界。

CSS的未來(lái)展望

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

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