配了八年 Sass，今天才发现「函数」这件事根本不用装——@function 把这件事从根上变了

在 Sass 里，「函数」是最常用的功能之一：px 转 rem、生成色阶、计算间距。这些逻辑封装成函数之后，整个项目复用，维护成本低。代价是：必须装 Sass、必须跑编译、必须在 npm script 里加上构建步骤。

这件事，Chrome 139 把账彻底变了。

@function 是 CSS 原生的自定义函数，用法和 Sass 函数几乎一样：

@function --px-to-rem(--px) {
  result: calc(var(--px) / 16 * 1rem);
}

.hero-title {
  font-size: --px-to-rem(48); /* 无需任何构建步骤 */
}

不需要装 Sass。不需要跑编译。浏览器自己算。

这件事意味着什么

以前一个团队要用函数，得先全员装 dart-sass 或 node-sass，配好编译器，再加到 npm script 里。不同机器还要处理 node 版本和依赖兼容。装完还要等构建，每改一次参数都要重新跑编译链路。

现在，一个 @function 定义，全项目随便调用。浏览器原生算。不需要构建链路，不需要维护依赖，不需要等待编译。

更重要的是运行时特性

Sass 函数在编译时执行，参数必须是编译时已知的常量。@function 在浏览器运行时执行，可以读取任何 CSS 自定义属性的当前值。

这个区别意味着：同一个函数，主题色切换时自动响应，不需要重新编译。

@function --theme-color(--base) {
  result: color-mix(in srgb, var(--base), white 20%);
}

.card {
  /* data-theme 切换时，函数输出自动变化 */
  background: --theme-color(var(--primary));
}

Sass 做不到这件事——它只能在构建时跑，构建完成后函数结果就锁定了。

浏览器支持现状

Chrome 139（2025 年 5 月）首发，目前约 66% 全球覆盖率。Firefox 和 Safari 还未支持。对于暂不支持的浏览器，可以用 CSS 级联回退或 @supports 渐进增强。

.button {
  /* 先定义静态值作为回退 */
  --border-radius: 4px;
  /* 支持 @function 的浏览器会覆盖 */
  --border-radius: --radius-md(var(--theme));
}

Sass 会被淘汰吗

不是「淘汰」，是「归位」。CSS 接管了 Sass 最早解决的几个问题：变量（custom properties）、嵌套（原生支持）、混入（@layer + @property）、函数（@function）。Sass 不会消失——复杂的条件逻辑、循环、构建脚本仍然需要它。但纯粹的状态逻辑，已经可以迁移到原生 CSS。

下一步

检查项目的 Sass 函数，找出那些「只依赖 CSS 值」的函数——px/rem 转换、颜色处理、间距计算——这些可以直接用 @function 重写。需要循环或复杂条件判断的函数暂时保留在 Sass，但可以开始规划迁移清单，从小范围开始试点。