Sass 统治 CSS 十五年，现在浏览器终于要追上来了——原生 @function 怎么用，我跑了一遍把坑标清楚

用 Sass 写项目，mixin 是灵魂。颜色透明度、响应式字号、计算属性，一行 @include 全搞定。但现在，浏览器原生 CSS 开始长出同样的能力，其中最让我激动的就是 @function。

@function 是什么

简单说，就是在 CSS 里写带参数的、返回值的、可以复用的逻辑。Chrome 138+ 已经支持了，Safari 也在跟进中，Firefox 应该不会太久。

语法长这样：

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

.card {
  background-color: --transparent(var(--base-color), 0.8);
}

看到了吗？–transparent 是我自己起的函数名，参数是 –color 和 –alpha，返回一个 oklch 半透明颜色。调用的时候直接当值用，不需要 @include，不需要传一堆变量。

和 Sass mixin 的区别

Sass mixin 输出的是一整块 CSS 声明，而 @function 只返回一个值。所以它更像是 Sass 的函数，而不是 mixin。

对应的 Sass 代码大概是这样：

@function transparent($color, $alpha) {
  @return rgba($color, $alpha);
}

.card {
  background-color: transparent(#faa6ff, 0.8);
}

现在原生 CSS就能做到同样的事，而且不需要任何预处理器。

我能用它做什么

举几个我跑通的实际场景：

第一个，颜色系统。我定义了一套 design token，颜色全存在 CSS 变量里。以前要给一个颜色生成半透明版本，要么在 HTML 里多写一层覆盖，要么用 Sass 写一堆 helper。现在一行搞定：

@function --alpha(--color, --alpha) {
  result: oklch(from var(--color)) l c h / var(--alpha));
}

.modal-backdrop {
  background-color: --alpha(var(--surface-primary), 0.6);
}

第二个，断点响应式字号。Sass 时代很多人这么干：

@function fluid-type($min, $max, $min-vw, $max-vw) {
  @return calc(#{$min} + #{$max - $min} * ((100vw - #{$min-vw}) / #{$max-vw - $min-vw}));
}

CSS 原生 @function 也能写，而且因为 CSS 环境自带 clamp()，写起来更直观：

@function --fluid-size(--min, --max) {
  result: clamp(var(--min), 2.5vw, var(--max));
}

h1 { font-size: --fluid-size(1rem, 3rem); }

现在的坑

浏览器支持还没全覆盖，写的时候建议用 @supports 做个渐进增强：

@supports (background-color: --alpha(red, 0.5)) {
  .card { background-color: --alpha(var(--surface), 0.8); }
}

参数类型目前只认 CSS 原生类型，写复杂逻辑还不行，比如你想在函数里做条件判断，暂时做不到。

下一步你可以做什么

如果你现在用 Sass 管理颜色、字号这些 design token，可以抽一个出来试试迁移。比如把颜色透明度相关的 mixin 改成 CSS @function，看看能不能直接去掉 Sass 编译这层依赖。工具链越轻，构建越快。

如果你的项目已经用 CSS 变量做 design token，那 @function 基本上可以无缝接进来，不用改现有架构。

CSS 这几年进化的方向很清晰：从”声明式样式表”慢慢变成”有逻辑的可复用样式系统”。@function 是这个方向上很重要的一步。Sass 不会马上消失，但有些场景，已经可以不用它了。