@function: 定义你自己的 CSS 函数
本系列前面几页讲的都是浏览器内置的 value function——calc()、clamp()、color-mix()……你只能用，不能造。@function at-rule 把这件事反过来：author
可以自己定义带参数、带类型约束、带默认值、有返回类型的可复用函数，内部还能写局部变量和条件逻辑，最后用 result 描述符吐出一个值。
它和 var() 不是一回事。 custom property + var() 是纯文本代换: 没有参数、没有类型、把一段 token 原样塞进去。@function 是真正的求值: 参数有 <length> /
<color> 这类类型约束（传错类型则该次调用无效）、有独立于调用点的局部作用域（函数内的 --local 不会泄漏出去）、还能声明返回类型。函数名是全局的，在任意选择器里直接当函数调用。
1 · 试用：一个把颜色调浅的函数
--tint(--color, --amount) 把传入的颜色按比例混白。--amount 带默认值 20%——调用时省略第二个参数就走默认。拖滑块改混白比例，换底色试不同输入，右侧读数是 getComputedStyle 读回的真实结果色。
2 · 封装逻辑：把一段流体字号公式收进一个名字
calc/clamp 页的流体字号公式每次都要原样抄一长串。把它收进 @function 后，调用点只剩 --fluid(16px, 40px, 100vw) 这样一行——函数内部用局部变量 --t 接住归一化进度 (借
progress() 把长度映射到 [0,1])，再线性插值。改一处定义，所有调用点同步更新。
现状提醒： @function 出自 CSS Functions and Mixins 模块，属实验特性——仅 Chromium 139+（2025-08）落地，Firefox 与 Safari 均未实现（兼容性据 MDN BCD，核对于 2026-07）。本页两处 demo 在支持的浏览器跑真 @function，否则退回 JS
按同样语义模拟（并在读数里标注）。渐进增强不能靠普通的 @supports (prop: value) 探到 at-rule，本页改用运行期探针: 临时插一条 @function --probe(){result:42px}，看一个隐藏元素的 computed 宽是否真等于 42px。
3 · 🔗 相关链接
- @function · developer.mozilla.org——at-rule 语法：参数类型、默认值、returns、result 描述符与局部 custom property。
- @function · css-tricks.com——本页主要来源：自定义函数的语法示例（类型检查、列表参数、默认值、嵌套）。
- CSS Functions and Mixins Module Level 1 · drafts.csswg.org——规范本体：@function 与（尚在草拟的）@mixin 的形式定义。