浏览器原生 CSS mixin 真要来了，以后写样式可能不需要 Sass 了

浏览器原生 CSS mixin 真要来了，以后写样式可能不需要 Sass 了

导语

写前端这么多年，Sass/Less 的 @mixin 几乎是样式复用的标配。但每次看到浏览器控制台里那一堆编译后的冗余代码，我都会想：如果浏览器原生就能复用样式块，谁还愿意多跑一遍编译？

好消息是，CSSWG 正在推进 CSS Custom Functions and Mixins 规范，Chromium 已经开始了早期实现。这篇文章帮你把这条线捋清楚：现状是什么、和 Sass mixin 有什么区别、现在能不能用。

正文

问题： Sass mixin 很好，但我们付了隐形成本

Sass mixin 解决了一个真实问题：重复样式需要抽象。比如按钮的圆角、阴影、字体大小，你在 5 个组件里写了 5 遍。

但代价也很明显：

• 需要编译步骤，CI /CD 多一个环节
• 编译后会产生重复 CSS，体积不一定小
• 团队协作时 .scss 文件满天飞， newcomer 上手成本高
• 无法在浏览器 DevTools 里直接定位到 mixin 定义

说白了，Sass mixin 是预处理器层面的语法糖，浏览器本身并不认识它。

方案：浏览器原生 mixin 长什么样

CSSWG 的 CSS Custom Functions and Mixins 模块定义了两套机制：

1. @function：自定义函数，返回一个值

@function --strip-unit($value) {
  @return $value / ($value * 0 + 1);
}

.card {
  width: --strip-unit(16px) * 10; /* 返回 160px */
}

2. @mixin + @apply：样式块复用

@mixin --button-base {
  display: inline-flex;
  padding: 0.75rem 1.5rem;
  border-radius: 0.5rem;
  font-weight: 600;
  transition: opacity 0.2s;
}

.primary-button {
  @apply --button-base;
  background: #2563eb;
  color: white;
}

.secondary-button {
  @apply --button-base;
  background: transparent;
  border: 1px solid #2563eb;
}

注意这里的语法：@mixin 用 -- 开头表示它是自定义层级的 mixin，不会和未来浏览器原生关键字冲突。@apply 把 mixin 里的属性块展开到当前规则里。

这和你熟悉的 Sass mixin 概念一致，但不需要编译，浏览器直接解析。

和 Sass mixin 的关键区别

最实际的收益是：你可以删掉构建流程里的 Sass 编译，直接写 .css 文件。对轻量项目来说，这是实打实的工程简化。

现在能用在生产环境吗

坦白说，还不行。

截至 2026 年 7 月：

• 规范还在 Working Draft 阶段
• Chromium 有早期 flag 实验，但未默认开启
• Firefox、Safari 暂无公开实现计划
• MDN 标注为 Experimental

但方向已经定了。参考 if()、@property、容器查询的推进节奏，从规范到默认启用通常需要 18-24 个月。现在正是提前布局的好时机。

渐进采用策略

如果你现在就想尝鲜，可以这样做：

阶段 1：用 @property 铺垫类型思维

@property --brand-hue {
  syntax: '';
  inherits: true;
  initial-value: 220;
}

这是目前已经能在 Chrome/Edge 里用的 CSS 原生能力，让你提前习惯“在 CSS 里声明变量类型”的写法。

阶段 2：用 CSS 嵌套 + 变量替代简单 mixin

.button {
  --pad: 0.75rem 1.5rem;
  --radius: 0.5rem;
  
  padding: var(--pad);
  border-radius: var(--radius);
  
  &.primary { background: #2563eb; }
  &.secondary { background: transparent; }
}

很多场景下，CSS 变量 + 嵌套已经能替代 70% 的 mixin 用例。

阶段 3：等原生 mixin 落地后迁移

规范一旦进入 Baseline，你之前用变量写的样式几乎可以无缝迁移到 @mixin 语法。

收尾

浏览器原生 CSS mixin 不是“要不要学”的问题，而是“什么时候 ready”的问题。按照当前 Chromium 的实验进度和 CSSWG 的推进节奏，2027 年上半年大概率能看到第一个稳定版实现。

我的建议是：现在不必急着在生产环境用，但可以用 CSS 变量 + 嵌套把样式抽象先做起来，等原生 mixin 落地后迁移成本会非常低。

判断标准很简单：如果你的 mixin 逻辑只是“把几个属性打包 reuse”，现在用 CSS 变量就能解决；如果涉及条件分支、循环、复杂计算，继续用 Sass 或 PostCSS，等原生方案成熟再迁移。

—

参考来源：

• MDN: CSS Custom Functions and Mixins
• CSS Podcast #92: CSS if() and custom functions
• Frontend Focus #750 补遗