用好 postcss-mixins 让你的样式开发效率翻倍

又踩坑了，mixin里变量不生效

今天改一个旧项目样式，想用 postcss-mixins 写个响应式 mixin，结果定义完死活不生效。代码看着没问题：

@define-mixin responsive-font $size {
  font-size: $size;
  @media (max-width: 768px) {
    font-size: calc($size - 2px);
  }
}

.title {
  @mixin responsive-font 20px;
}

但编译出来，@media 里的 $size 根本没被替换，直接原样输出了。浏览器报错不说，样式也完全不对。我第一反应是版本问题，赶紧看 package.json，postcss 和 postcss-mixins 版本都挺老，但也不是低到离谱那种。

折腾了半天发现，不是版本问题，而是我记错了语法。你以为像 Sass 那样啥都能直接传变量？错。postcss-mixins 对变量插值的支持其实是有限制的，尤其是在函数调用和 calc 里面。

试过的几种方案，全翻车

• 先试了把 calc($size - 2px) 改成 calc(var(--font-size) - 2px)，然后在 mixin 外定义 CSS 变量 —— 想法很美好，实际根本没法动态绑定，每个地方都要手动设 –font-size，失去了 mixin 的意义。
• 又试了嵌套 mixin，外面包一层传参，结果更乱，编译后一堆重复 media query，性能爆炸。
• 还查了文档说可以用 JavaScript 函数写高级 mixin，心想这下稳了吧？写了半天 async function 返回 css 字符串，结果 postcss-loader 根本不认，报错说 “mixins must be objects or functions that return strings”…… 后来才发现要配 postcss-js 才行，但我这项目没上 js-in-css，加这个成本太高。

最离谱的是，我在另一个项目里明明这么写过就没问题。对比了一下，那个项目用的是 postcss-simple-vars + postcss-mixins 组合，而且 loader 顺序写反了！我这边是：

// webpack.config.js
postcss: {
  plugins: [
    require('postcss-simple-vars'),
    require('postcss-mixins'),
  ]
}

而之前能跑的是：

postcss: {
  plugins: [
    require('postcss-mixins'),
    require('postcss-simple-vars'), // 这个顺序才对！
  ]
}

卧槽，就这个顺序搞了我两小时。因为 postcss-simple-vars 要在 mixin 展开之后再做变量替换，如果你先 simple-vars 再 mixins，那它会在 mixin 解析前就把 $size 当成 undefined 干掉了，压根不会传进去。

最终解决方案：调整插件顺序 + 避开 calc 坑

改完顺序还不算完。我发现就算变量传进去了，在 calc() 里直接用也会出问题，因为 postcss-mixins 不会帮你解析里面的表达式。最后妥协了一下，改成这样：

@define-mixin responsive-font $baseSize {
  font-size: $baseSize;
  @media (max-width: 768px) {
    /* 这里不能用 calc($baseSize - 2px)，必须提前算好或用其他方式 */
    font-size: $baseSize * 0.9;
  }
}

或者更稳妥点，干脆不用 calc，用乘法逼近效果。比如 20px 的小屏用 18px，就是 0.9 倍。虽然不够精确，但视觉上差别不大，而且兼容性更好。

如果你非得用 calc，也可以在外面套一层预处理（比如用 postcss-preset-env 的 custom-properties），但我这项目太老了，不敢动大结构，就先这么凑合着。

还有一个办法是把 calc 拆出去，让使用者自己覆盖：

@define-mixin responsive-font $size {
  font-size: $size;
}

.title {
  @mixin responsive-font 20px;
  @media (max-width: 768px) {
    font-size: calc(20px - 2px); /* 手动写死，丑但是有效 */
  }
}

当然这等于放弃了封装性，但胜在稳定可靠。有些时候，简洁比抽象更重要。

顺手整理了个配置模版

为了避免下次再踩，我把现在的 postcss 配置固化下来了：

// postcss.config.js
module.exports = {
  plugins: [
    require('postcss-import'),
    require('postcss-mixins'), // 必须放 simple-vars 前面
    require('postcss-simple-vars')({
      silent: true, // 遇到未定义变量别报错
    }),
    require('postcss-nested'), // 支持嵌套写法
    require('autoprefixer'),
  ],
};

注意顺序：mixins → simple-vars → nested → autoprefixer。这个顺序跑了好几个项目都没出过问题。尤其是 simple-vars 必须在 mixins 后面，否则变量进不了 mixin 体。

另外提醒一句，$ 开头的变量名只是 convention，你也可以用 — 开头配合 CSS 自定义属性，但那样就得用 postcss-custom-properties 或 preset-env 来支持，复杂度上升不止一档。

还有个小问题没彻底解决

现在 mixin 里如果嵌套多层 media，有时候会生成重复规则。比如：

@define-mixin card-style $color {
  border: 1px solid $color;
  @media (max-width: 768px) {
    padding: 10px;
    @media (orientation: landscape) {
      padding: 5px;
    }
  }
}

这种嵌套 media 在某些 postcss 版本里会被 flatten 掉，导致 inner media 丢失。目前我的 workaround 是避免嵌套 media，改成平级：

@media (max-width: 768px) and (orientation: landscape)

虽然写起来麻烦点，但至少编译结果可控。这个问题可能跟 postcss-nested 的版本有关，我用的是 ^5.0.0，据说 6+ 修复了一些 edge case，但升级要改一堆语法，暂时搁置。

改完之后整体可用，虽然有点小瑕疵，但不影响上线。毕竟前端开发就是这样，完美主义活不久，能跑就行。

总结一下我踩过的几个坑

• mixin 插件顺序必须在变量插件前面：不然变量进不去
• calc() 里不要直接用 mixin 参数：会被当字符串处理
• 避免 media 嵌套：容易被错误解析
• 参数命名别冲突：比如别在多个 mixin 里都用 $size，容易误传

以上是我踩坑后的总结，希望对你有帮助。如果你有更好的方案欢迎评论区交流，比如有没有人真正在 production 里用了 JS 版本的高级 mixin？我是不敢轻易上了。