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); /* 2px dashed blue */  
}

再也不用到处硬编码颜色了。一个函数，无限可能。

不止边框：尺寸和布局函数

因为CSS函数返回值，你可以在width、margin甚至计算中使用它们：

@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：值是有效的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