将 脚本之家 设为“星标⭐”
第一时间收到文章更新
来源 | 大迁世界 （ID：qq449245885）
当我第一次看到CSS即将支持原生函数时？没错，朋友，这是真的！
如今，CSS也开始拥抱函数特性了——那些曾坚称CSS不配称作“编程语言”的人，现在或许得重新考虑一下了。
好了，兴奋之余，我们还是先稳一下，深入了解它的具体内容吧！
基础知识：函数的定义和调用
试想一下，你正在给网页中的多个元素添加相同的虚线边框。通常的写法是：
div { border: 2px dashed black;}p { border: 2px dashed black;}span { border: 2px dashed black;}
虽然不算麻烦，但如果可以一句话简单告诉CSS：“嗨，给我来个虚线边框”，岂不是美滋滋？
现在，通过CSS新增的@function功能，你完全可以这么做：
@function --dashed-border() { result: 2px dashed black;}
定义完毕，你便能随心调用它：
div { border: --dashed-border();}
神奇吧？从此，每次需要虚线边框，你只需简单调用--dashed-border()，CSS会为你完成其余工作。
更强大！支持参数的函数
CSS函数还支持参数调用，这使它更加强大灵活。比如我们要实现不同颜色的边框：
@function --dashed-border(--color: red) { result: 2px dashed var(--color);}
使用时非常简单：
div { border: --dashed-border(blue); /* 蓝色虚线边框 */}
告别到处“硬编码”颜色，一个函数，带来无限的可能。
不止边框：尺寸与布局也能用函数搞定
CSS函数最大的特点是能返回值，因此它们也能用于尺寸、间距甚至运算表达式里：
@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（长度单位如px, em）
-
color（颜色值）
-
number（纯数字）
-
angle（角度值如deg）
举个例子：
@function --rotate-element(--angle: 45deg) { result: rotate(var(--angle));}.box { transform: --rotate-element(90deg);}
若你传递了错误的类型（例如px单位），则函数不会执行，这就能有效避免潜在样式bug。同时，CSS函数还支持默认参数值，使调用更加灵活。
组合嵌套函数：无限创意的入口
当你将多个函数组合嵌套，CSS的表现力更上一层楼：
@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);}
上例中，两个函数相互调用，实现了复杂的动态半透明阴影效果，赋予设计更多可能。
当前浏览器支持情况
当然，在你兴奋地全面重构CSS代码之前，有件事得明确：目前CSS函数尚处于实验阶段，仅限Chrome Canary浏览器（需手动开启实验功能）才能使用。
若你想尝鲜，可按以下步骤：
-
下载并安装Chrome Canary
-
打开chrome://flags
-
启用Experimental Web Platform features选项
体验一把CSS的未来世界。
CSS的未来展望
综上，CSS函数就像内置版的“混合宏”（Mixin），无需额外预处理器即可实现复用性更佳的CSS代码。这使你的样式代码更易维护、更整洁易读，并实现以往只有Sass或JavaScript才能完成的高级动态效果。
在所有浏览器全面支持之前，请保持关注、积极尝试。毕竟，任何能拯救我们于重复代码之中的技术，都是值得庆祝的胜利！
推荐阅读：
纯 CSS 来计算当前窗口的宽高，怎么做到的？
2024年CSS持续活跃，年终大盘点！
稚晖君和机器人，离不开自行车
玩不了游戏的小学生，把商场手机店变成了他们的“包机房”
在公司干了五年，工资不如刚入职的校招生
