你以为 Sass 不可替代？Chrome 146 把这件事彻底变了

你写了八年 Sass，每次给团队引入新项目，第一件事就是配 node-sass 或者 dart-sass——今天 Chrome 146 把 @mixin 直接做进了浏览器，原生 CSS 不再需要预处理器就能写可复用的样式块了。

Sass 解决了什么问题，为什么预处理器还是门槛

Sass 的 @mixin 解决了 CSS 长期最大的痛点：重复代码。写一个 .card-base 的样式，要在每个地方复制粘贴，改一处要改 N 处。Mixin 把这个变成了定义一次、套用 N 次。

但代价是：必须有构建步骤。node-sass 要编译，dart-sass 要编译，团队新人不装依赖就跑不起来，预处理器版本不一致还经常出现「我本地正常你本地不行」的玄学问题。

更关键的是：Sass 在构建时展开，运行时是静态的。如果你需要根据用户操作或主题切换来改变样式组合，Sass 帮不了你。

原生 CSS Mixin 来了：@mixin + @apply

Chrome 146 开始，CSS 原生支持了 Sass 类似的语法：

/* 定义一个 mixin */
@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;
}

生成的最终效果和 Sass 展开后完全一致，但它是浏览器直接解析的，不需要任何构建工具。

带参数的 Mixin：Sass 能做的它都能做

Sass Mixin 最强大的能力是参数化，原生 CSS 同样支持：

@mixin --button-base(
  --bg type(color) = #0077cc,
  --text type(color) = white,
  --radius type(angle) = 6deg
) {
  background: var(--bg);
  color: var(--text);
  border-radius: var(--radius);
  padding: 0.5em 1.2em;
}

.btn-primary {
  @apply --button-base;
}

.btn-danger {
  @apply --button-base(--bg: #dc3545);
}

参数可以带类型标注（type(color)、type(angle)），可以给默认值，还可以组合条件逻辑。这和 Sass 的 @mixin $bg: $color 几乎一一对应，只是语法用破折号开头遵循 CSS Custom Properties 的命名惯例。

为什么运行时才是真正的差异

这是原生 Mixin 和 Sass 本质上不同的地方：

@mixin --theme-card {
  background: var(--card-bg, white);
  color: var(--card-text, black);
  @media (prefers-color-scheme: dark) {
    background: var(--card-bg-dark, #1a1a1a);
    color: var(--card-text-dark, #eee);
  }
}

.card {
  @apply --theme-card;
}

Sass 的 @media 在构建时处理，原生 Mixin 的 @media 在浏览器里实时响应。你可以基于 CSS Custom Properties 的当前值动态改变 Mixin 的输出，而 Sass 在你刷新页面之前就已经定型了。

迁移建议：不要一次性全换，分层走

不是所有 Sass 特性现在都能在原生 CSS 里找到对应，迁移建议分三层：

第一层（现在就能换）： 无参数的结构块，比如 .clearfix、flex-center、card-base 这类在每个组件里重复的定义。

第二层（需要构建但优先换）： 带参数的 mixin，如果你的项目已经用上了 CSS Custom Properties，可以把参数化部分迁移到原生，再逐步去掉 Sass。

第三层（暂时保留）： 循环、@while、复杂运算这类 Sass 特有的编程语言能力，原生 CSS Mixin 目前还不支持。

/* 这是 Sass 专属，原生 CSS Mixin 做不到 */
@for $i from 1 through 12 {
  .col-#{$i} { width: 100% / 12 * $i; }
}

对于这类场景，预处理器仍然是必要的。但根据 State of CSS 2025 的调查，超过 60% 的 Sass 使用场景集中在 Mixin 和变量这两个功能——这两件事现在浏览器自己会了。

下一步：怎么确认你的项目能跑

Chrome 146+、Edge 146+ 已支持，Safari 18.4 也已支持。可以直接打开 DevTools 在 Elements 面板里验证 Mixin 是否生效，不需要任何 polyfill。

如果你的团队还在用 node-sass 或旧版 dart-sass，现在是一个重新评估的时间点：对于新项目，可以先不装 Sass，用原生 CSS Mixin 试试看——构建步骤少一步，出问题的机会也少一步。