CSS中的函數(shù)？沒(méi)錯(cuò)，伙計(jì)！我太需要這個(gè)功能了！

就像其他編程語(yǔ)言一樣，CSS現(xiàn)在也要引入函數(shù)功能了。那些說(shuō)CSS不是編程語(yǔ)言的反對(duì)者們現(xiàn)在還有什么話說(shuō)？

在過(guò)度興奮之前，讓我們深入了解一下！

基礎(chǔ)概念：定義和使用函數(shù)

想象一下，你正在為一組元素添加樣式，它們都需要虛線邊框。通常你會(huì)這樣寫：

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

雖然不算太糟，但如果能直接說(shuō)"嘿CSS，給我一個(gè)虛線邊框"然后完事，豈不是更好？

這就是@function的用武之地。通過(guò)它，你可以像編程語(yǔ)言一樣定義可重用的函數(shù)：

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

然后像變魔術(shù)一樣在任何地方應(yīng)用它：

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

太棒了！現(xiàn)在每次需要虛線邊框時(shí)，只需調(diào)用--dashed-border()。剩下的工作交給CSS。

帶參數(shù)的函數(shù)

想讓功能更酷炫嗎？函數(shù)可以接受參數(shù)。想象一下動(dòng)態(tài)設(shè)置不同邊框顏色：

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

現(xiàn)在你可以這樣做：

div {  
 border: --dashed-border(blue); /* 2px dashed blue */  
}

再也不用到處硬編碼顏色了。一個(gè)函數(shù)，無(wú)限可能。

不止邊框：尺寸和布局函數(shù)

因?yàn)镃SS函數(shù)返回值，你可以在width、margin甚至計(jì)算中使用它們：

@function --double-size(--size: 10px) {  
 result: calc(var(--size) * 2);  
}
.box {  
 padding: --double-size(15px); /* 30px */  
}

或者，假設(shè)你想為網(wǎng)格創(chuàng)建靈活的間距系統(tǒng)：

@function --gap(--scale: 1) {  
 result: calc(var(--scale) * 8px);  
}
.grid {  
 display: grid;  
 gap: --gap(2); /* 16px */  
}

這使你的間距系統(tǒng)更加可預(yù)測(cè)，并且易于在設(shè)計(jì)系統(tǒng)中調(diào)整。

類型檢查和默認(rèn)值

CSS函數(shù)一個(gè)非常酷的特性是支持類型檢查。這意味著你可以指定函數(shù)應(yīng)該期望的值類型，有助于防止錯(cuò)誤。你可以定義：

• length：值是有效的CSS長(zhǎng)度（如px、em、%）
• color：只使用有效顏色
• number：只允許數(shù)值（如1、2、3）
• angle：角度值如deg、rad等

示例：

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

如果你嘗試傳遞非角度值（如px），它將不起作用，從而防止?jié)撛诘臉邮藉e(cuò)誤。

是的，函數(shù)也支持默認(rèn)值，就像前面顏色示例中看到的那樣。

函數(shù)嵌套函數(shù)

當(dāng)你開(kāi)始組合函數(shù)時(shí)，事情會(huì)變得更加強(qiáng)大：

@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)用另一個(gè)函數(shù)來(lái)動(dòng)態(tài)生成半透明陰影顏色。這為復(fù)雜樣式設(shè)計(jì)開(kāi)辟了許多創(chuàng)造性的可能性。

轉(zhuǎn)自https://juejin.cn/post/7512288606095376423