CSS中的函數？沒錯，伙計！我太需要這個功能了！
就像其他編程語言一樣，CSS現在也要引入函數功能了。那些說CSS不是編程語言的反對者們現在還有什么話說？
在過度興奮之前，讓我們深入了解一下！
基礎概念：定義和使用函數
想象一下，你正在為一組元素添加樣式，它們都需要虛線邊框。通常你會這樣寫：
div {
border: 2px dashed black;
}
p {
border: 2px dashed black;
}
span {
border: 2px dashed black;
}
雖然不算太糟，但如果能直接說"嘿CSS，給我一個虛線邊框"然后完事，豈不是更好？
這就是@function的用武之地。通過它，你可以像編程語言一樣定義可重用的函數：
@function --dashed-border() {
result: 2px dashed black;
}
然后像變魔術一樣在任何地方應用它：
div {
border: --dashed-border();
}
太棒了！現在每次需要虛線邊框時，只需調用--dashed-border()。剩下的工作交給CSS。
帶參數的函數
想讓功能更酷炫嗎？函數可以接受參數。想象一下動態設置不同邊框顏色：
@function --dashed-border(--color: red) {
result: 2px dashed var(--color);
}
現在你可以這樣做：
div {
border: --dashed-border(blue);
}
再也不用到處硬編碼顏色了。一個函數，無限可能。
不止邊框：尺寸和布局函數
因為CSS函數返回值，你可以在width、margin甚至計算中使用它們：
@function --double-size(--size: 10px) {
result: calc(var(--size) * 2);
}
.box {
padding: --double-size(15px);
}
或者，假設你想為網格創建靈活的間距系統：
@function --gap(--scale: 1) {
result: calc(var(--scale) * 8px);
}
.grid {
display: grid;
gap: --gap(2);
}
這使你的間距系統更加可預測，并且易于在設計系統中調整。
類型檢查和默認值
CSS函數一個非常酷的特性是支持類型檢查。這意味著你可以指定函數應該期望的值類型，有助于防止錯誤。你可以定義：
length：值是有效的CSS長度（如px、em、%）color：只使用有效顏色number：只允許數值（如1、2、3）angle：角度值如deg、rad等
示例：
@function --rotate-element(--angle: 45deg) {
result: rotate(var(--angle));
}
.box {
transform: --rotate-element(90deg);
}
如果你嘗試傳遞非角度值（如px），它將不起作用，從而防止潛在的樣式錯誤。
是的，函數也支持默認值，就像前面顏色示例中看到的那樣。
函數嵌套函數
當你開始組合函數時，事情會變得更加強大：
@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);
}
這里，一個函數調用另一個函數來動態生成半透明陰影顏色。這為復雜樣式設計開辟了許多創造性的可能性。
轉自https://juejin.cn/post/7512288606095376423
該文章在 2025/6/6 9:30:33 編輯過
400 186 1886
