配了八年 Sass，每次写 @mixin 都要靠 node-sass 编译——今天微软把这件事彻底搬进了浏览器

以前用 Sass 写 @mixin card { border-radius: 12px; padding: 1.5rem; box-shadow: 0 2px 8px rgba(0,0,0,0.1); background: white; } 都要靠 node-sass 编译。今天微软把这件事彻底搬进了浏览器——Chrome Canary 开启实验特性 flag 后，原生 @mixin 和 @apply 直接在浏览器里跑，不需要任何编译工具了。

这件事的根子不在「语法移植」，在「谁在管样式复用」这件事上彻底变了。

Sass 编译时替换 vs CSS 原生运行时上下文

Sass 的 @mixin 是编译时替换——你写一百个 @include card-base，构建工具就把一百份样式块塞进输出 CSS，浏览器拿到的是填好的静态结果，不带任何上下文。原生 CSS mixin 保留了完整的级联和媒体查询上下文——定义一次，在任何地方 @apply，浏览器自己知道你在哪个容器里、在哪个断点下。

用起来是这样的：

/* 定义 */
@mixin --card-base {
  border-radius: 12px;
  padding: 1.5rem;
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
  background: white;
}

/* 套用 */
.product-card {
  @apply --card-base;
  border: 1px solid #e0e0e0;
}

.profile-card {
  @apply --card-base;
  border: 2px solid #3b82f6;
}

带参数的版本，语法和 CSS 变量一致，双破折号开头：

@mixin --text-gradient(--angle type(angle): to bottom right) {
  background: linear-gradient(var(--angle), var(--from), var(--to));
  color: transparent;
  background-clip: text;
}

.heading {
  @apply --text-gradient(to right);
}

现状：自定义函数已落地，mixin 正在路上

MDN 官方文档明确写了：目前只有 CSS 自定义函数有浏览器支持，CSS mixin 尚未在任何浏览器中正式支持。但 Microsoft 已经把 CSS mixin 原型做进了 Chromium，Chrome Canary 开启 --enable-features=CSSMixins flag 后可以直接体验。

已经落地的是 CSS 原生函数（不需要 flag）：

div {
  --padding: 20px;
  margin-inline: calc(-1 * var(--padding)); /* Sass 要写个函数，CSS 现在自己会了 */
}

三角函数 sin() cos() tan() 也已经在 Chrome 129 稳定版里，级联层面支持条件逻辑和 @media 断点，这套东西以前只有 Sass 能做。

怎么试

Chrome Canary 开启方式：

open -a "Google Chrome Canary" --args --enable-features=CSSMixins

或者在 chrome://flags/#enable-experimental-web-platform-features 里把 Experimental Web Platform features 设为 Enabled，然后重启。

什么时候可以用

现在还是实验阶段，建议这样规划：

1. 立即：在本地开发环境开启 flag，把简单样式复用从 Sass 迁到原生 @mixin，感受差距
2. 短期：保持 Sass 在生产环境跑，原生 mixin 作为开发期预览能力
3. 等 Baseline：CSSWG 规范推进到所有主流浏览器支持后，才是生产级切换时机

简单样式复用可以直接用 CSS 变量，不需要 mixin。只有当一个样式块里有多个属性组合、需要条件逻辑、或要和 @container 联动时，原生 mixin 的价值才明显——这些场景以前必须靠 Sass 或 PostCSS。

为什么这件事值得盯着

样式复用的管理权终于从构建工具回到了浏览器手里。以前维护设计系统，token 在 Sass 变量里、mixin 在 .scss 文件里、组件样式在 .vue 或 .tsx 里，每换一次技术栈都要重新翻译一遍。原生 mixin 把这套东西收进了浏览器可以读懂的 CSS 本身——你改一个 @mixin，所有套用了它的组件立刻跟着变，不需要构建，不需要重新编译。

这件事对设计系统团队的影响最直接：一个设计 token 在 CSS 里定义一次，所有组件直接 @apply，不用再通过 Sass 变量中转，不用再维护一套 CSS-in-JS 的 theme 对象。浏览器原生接管了样式复用的运行时管理，把构建工具的那层抽象彻底去掉了。

不过现在还早，别急着上生产。开着 Canary 试一圈，感受一下「写 CSS 不需要 node-sass」是什么体验就行。