CSS @function 原生函数怎么落地：result、参数作用域与兼容降级

做响应式卡片时，很多项目会把“窄屏用小间距、宽屏用大间距”写进多个选择器。变量能保存值，却不能直接收纳这段带参数的判断。CSS @function 提供了一个原生复用入口：调用方传入参数，函数通过 result 给出可用于属性值的结果。不过它目前仍不是所有主流浏览器都能稳定解析的基础能力，落地时要把“写法”和“回退”一起设计。

CSS @function 适合解决哪类前端复用

它解决的不是“把一段 CSS 文本复制到另一个文件”，而是把一组可计算的属性值收成带参数的原生函数。比如同一个间距规则要被 padding、gap 和 border-radius 使用时，调用方只需要传入基础值，变化集中在函数内部。

@function --space(--value ) returns  {
  result: calc(var(--value) * 1.5);
}

.card {
  padding: --space(12px);
  gap: --space(8px);
}

函数名是 --space，调用形式是 --space(12px)。参数名本身也是一个函数内部可读取的自定义属性。这里没有引入 Sass，也没有把 CSS 生成成另一套语法；代价是必须面对浏览器支持差异。

result 为什么不是 JavaScript 的 return

最容易误判的地方是 result 的覆盖关系。函数体会按 CSS 规则完成解析，同一函数中如果出现多个可用的 result，后面的声明可能覆盖前面的声明。因此，把媒体条件写在后面，通常比把默认值写在后面更符合预期。

@function --narrow-wide(--narrow, --wide) {
  result: var(--wide);
  @media (width 

图中的四个节点对应这段代码：@function --space 接收 --value，result 描述返回值，调用位置才把结果放进 padding。它表达的是静态绑定关系，不应理解成一张逐步执行图。

参数类型和返回类型决定了复用边界

不写类型时，参数默认可以接受更宽的值，但这会把拼写错误或不合适的单位留到更晚才暴露。给参数写 、给返回值写 returns ，可以让函数的用途更清楚，也方便代码审查。

@function --overlay(--tone , --accent ) returns  {
  --mix: color-mix(in srgb, var(--tone) 82%, var(--accent));
  result: var(--mix);
}

.notice {
  background-color: --overlay(#f7f9fc, #315efb);
}

函数体内的 --mix 是局部自定义属性，调用它的元素仍然可以提供外部变量。若参数、局部变量和元素上的变量同名，函数参数优先级更高，函数体内的局部属性还会覆盖前两者。这个规则很适合做主题 token 变体，但不适合把大量隐式依赖塞进一个函数。

兼容降级要先保住基础样式

MDN 当前把 @function 标为 Limited availability，并提示它属于 Experimental 技术。换句话说，不能只在函数调用旁边留下唯一声明，然后期待不支持的浏览器自行猜出结果。更稳妥的写法是先提供普通 CSS 值，再用 @supports 为支持函数的环境覆盖。

.card {
  padding: 18px;
}

@supports (padding: --space(12px)) {
  .card {
    padding: --space(12px);
  }
}

如果项目已有 Sass、PostCSS 或构建期 token 方案，可以先生成基础声明，把 @function 当作增强层，而不是把核心可用性押在它上面。兼容检查至少覆盖目标浏览器、无脚本首屏和组件嵌套场景；不要用“开发机能解析”替代真实浏览器矩阵。

什么时候值得采用 CSS @function

采用前可以做一个很小的门禁：确认团队能接受函数名以 -- 开头，确认 CSS 检查工具能正确解析，确认回退声明不会被后续层叠覆盖。若三个条件有一个不满足，继续用自定义属性配合构建期处理，维护成本往往更低。

相关问题

CSS @function 能像 JavaScript 函数一样提前结束吗？

不能按 JavaScript 的 return 语义理解。多个 result 会参与 CSS 的层叠和条件规则，顺序与作用域必须一起检查。

函数参数一定要写 CSS 类型吗？

不是必须，但类型能让复用边界更明确。涉及长度、颜色或数字计算时，建议同时声明参数类型和返回类型。

不支持 @function 的浏览器会怎样？

相关声明可能无法成为有效属性值。因此应先写普通 CSS 回退，再用 @supports 仅在能力可用时覆盖。