我为什么狠狠爱上这些“新 CSS 函数”：它终于开始像个聪明人了

我有一支技术全面、经验丰富的小型团队，专注高效交付中等规模外包项目，有需要外包项目的可以联系我

这些年，我眼看着 CSS 一点点变。有的变化小到像“换了个标点”，你用不用都无所谓；也有的变化大到能改写你整套写法。

但现在，来了个让我真的兴奋的东西：CSS Functions（CSS 函数）。

它会改变我们写 CSS 的方式。与此同时，也有人觉得它“没必要”“花里胡哨”。然而我反而更笃定：我们正在靠近一件事——那些 Sass 之类预处理器早就做了很多年的能力，终于要原生了。说真的，这一天来得有点晚，但总比不来强。

来，开整。

什么是 CSS Functions？

CSS 函数，可以理解成：一小段可以复用的 CSS 逻辑——在同一个文件里到处用，感觉就像 JavaScript 里的函数。

以前的 CSS 更像“摆放东西”：颜色、尺寸、位置。现在不一样了：我们能在 CSS 里写“自定义函数”。这件事本身就很新。

举个最直观的例子：你想把任意颜色变成半透明。过去你可能得在每个需要透明度的地方重复写一堆东西；现在，你可以把复杂度藏起来，只留一句“调用”。

比如这样：

.my-box { background: var(--transparent(red, 0.5)); }

啪——一个红色盒子，50% 透明。就这一行。像魔法一样，只是没有兔子也没有帽子。

你可能会立刻反问： “那我直接写个带透明度的 class，然后哪里要用就加上，不就完了？”

嗯，你说得没错。但这只是冰山一角。很快你会发现：函数的狠，不在“少写几行”，而在“能写逻辑”。

不止复用：还能设置默认值

函数厉害的地方之一，是你可以给参数设默认值。

比如：你忘了传颜色？没关系，默认给你蓝色。你忘了传透明度？也没事，默认就是 50%。

@function --transparent(color = blue, amount = 0.5) { result: hsl(from var(color) l + var(amount)); }

这意味着什么？意味着你写样式时不必每次都“把所有细节掏出来摆一遍”。你可以更像在写一个可维护的系统：少重复、多约束、少犯错。

CSS Functions 的运行方式：最后一个结果说了算

如果你是从 JavaScript 来的，这里有个必须记住的点：在 JS 里你会想“return 之后就结束”，但在 CSS 里不是这么玩的——CSS 是“最后的 result 赢”。

这就是大家熟悉的“层叠”（cascade）。非常 CSS，甚至有点“你不服也得服”。

换句话说：你可以定义同一个函数多次，而最终生效的是最后一次定义的版本。

刚听会觉得怪。不过，正因为它怪，它反而能玩出一些很酷的东西——比如配合 CSS layers 做“自动覆盖”。

你可以有一个基础函数；然后在主题层里再定义一个同名函数；主题层那份会自动覆盖基础版本。听起来是不是有点像 JavaScript 的函数重载？——只不过发生在 CSS 里。谁能想到，CSS 也能“优雅地耍花活”。

进阶玩法：响应式函数、甚至参数类型

好了，入门热身结束。上点“热的”。

1）写一个会随屏幕变化的函数

你可以让函数根据屏幕尺寸返回不同值，直接把“响应式逻辑”塞进函数里：

@function --responsive(small, medium, large) { result: large; @media (max-width: 300px) { result: small; } @media (min-width: 301px) and (max-width: 600px) { result: medium; } }

小手机？给你 small。平板？给你 medium。大屏？默认 large。

你不需要到处写重复的媒体查询；相反，你把规则集中起来，别人读你的 CSS 也更快懂：哦，你这个值是按屏幕段位来的。

2）给参数加类型

更狠的是：你甚至可以给函数参数定义类型。比如，颜色就必须是颜色，数字就必须是数字。这样能更早发现错误——比如那次你不小心把背景色写成了42，然后还纳闷为什么页面看起来像精神状态不稳定。

@function --transparent(--color type(<color>), --alpha type(<number>)) returns type(<color>) { result: oklch(from var(--color) l c h / var(--alpha)); }

你看，CSS 现在不仅能表达“长什么样”，还能表达“应该是什么类型”。这对大型项目来说，是救命级别的改进。