CSS竟然开始支持函数了！编程语言的未来能否在此掀起波澜？-51CTO.COM

当我第一次看到CSS即将支持原生函数时？没错，朋友，这是真的！

如今，CSS也开始拥抱函数特性了——那些曾坚称CSS不配称作“编程语言”的人，现在或许得重新考虑一下了。

好了，兴奋之余，我们还是先稳一下，深入了解它的具体内容吧！

基础知识：函数的定义和调用

试想一下，你正在给网页中的多个元素添加相同的虚线边框。通常的写法是：

div {
  border: 2px dashed black;
}
p {
  border: 2px dashed black;
}
span {
  border: 2px dashed black;
}1.
2.
3.
4.
5.
6.
7.
8.
9.

虽然不算麻烦，但如果可以一句话简单告诉CSS：“嗨，给我来个虚线边框”，岂不是美滋滋？

现在，通过CSS新增的@function功能，你完全可以这么做：

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

定义完毕，你便能随心调用它：

div {
  border: --dashed-border();
}1.
2.
3.

神奇吧？从此，每次需要虚线边框，你只需简单调用--dashed-border()，CSS会为你完成其余工作。

更强大！支持参数的函数

CSS函数还支持参数调用，这使它更加强大灵活。比如我们要实现不同颜色的边框：

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

使用时非常简单：

div {
  border: --dashed-border(blue); /* 蓝色虚线边框 */
}1.
2.
3.

告别到处“硬编码”颜色，一个函数，带来无限的可能。

不止边框：尺寸与布局也能用函数搞定

CSS函数最大的特点是能返回值，因此它们也能用于尺寸、间距甚至运算表达式里：

@function --double-size(--size: 10px) {
  result: calc(var(--size) * 2);
}

.box {
  padding: --double-size(15px); /* 结果为30px */
}1.
2.
3.
4.
5.
6.
7.

再比如，构建更灵活的网格布局间距：

@function --gap(--scale: 1) {
  result: calc(var(--scale) * 8px);
}

.grid {
  display: grid;
  gap: --gap(2); /* 16px */
}1.
2.
3.
4.
5.
6.
7.
8.

你的设计体系会因此变得更易于控制、更统一规范。

类型检查与默认值机制，拒绝错误更智能

CSS函数还引入了类型检查机制，你可以明确设定函数参数应接收的具体类型：

length（长度单位如px, em）
color（颜色值）
number（纯数字）
angle（角度值如deg）

举个例子：

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

.box {
  transform: --rotate-element(90deg);
}1.
2.
3.
4.
5.
6.
7.

若你传递了错误的类型（例如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);
}1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.

上例中，两个函数相互调用，实现了复杂的动态半透明阴影效果，赋予设计更多可能。

当前浏览器支持情况

当然，在你兴奋地全面重构CSS代码之前，有件事得明确：目前CSS函数尚处于实验阶段，仅限Chrome Canary浏览器（需手动开启实验功能）才能使用。

若你想尝鲜，可按以下步骤：

下载并安装Chrome Canary
打开chrome://flags
启用Experimental Web Platform features选项

体验一把CSS的未来世界。

CSS的未来展望

综上，CSS函数就像内置版的“混合宏”（Mixin），无需额外预处理器即可实现复用性更佳的CSS代码。这使你的样式代码更易维护、更整洁易读，并实现以往只有Sass或JavaScript才能完成的高级动态效果。

在所有浏览器全面支持之前，请保持关注、积极尝试。毕竟，任何能拯救我们于重复代码之中的技术，都是值得庆祝的胜利！