less 的 mixin 无法可靠处理浏览器前缀，应使用 postcss + autoprefixer 流水线；手动封装前缀易失效、难维护，生产环境推荐弃用 mixin 而依赖自动化工具。
Less 本身不生成浏览器前缀，所谓“用 Mixin 封装前缀”是手动模拟兼容性逻辑，不是自动适配；真要可靠加前缀，得走 PostCSS + autoprefixer 流水线。Mixin 方案只适合极简场景或学习演示，生产环境硬上容易翻车。
为什么 .flex() 这类 Mixin 容易失效
很多人写 .flex() 生成 display: -webkit-flex; display: flex;，但问题不在语法——而在于：
- IE10 的
-ms-flexbox和现代display: flex渲染行为不一致，混在一起可能触发怪异模式 - Chrome 120+ 已完全移除
-webkit-flex，但 Mixin 还在吐，白占体积 - 写了
display: -webkit-flex后，autoprefixer 会跳过整条声明，导致其他属性（比如flex-wrap）没前缀 - 无法响应
browserslist配置，改个目标浏览器就得手动删 Mixin 里的某一行
如何写一个不踩坑的 transform Mixin
transform 组合多、顺序敏感，直接拼字符串极易出错。正确做法是让 Mixin 控制参数组合，而不是靠调用者手写值：
- 用
@arguments接收不定参时，必须设默认值，否则.transform()空调用会编译失败 - 避免生成无意义的
rotate(0deg)，加条件判断：.add(@val, @name) when (@val != 0) - 用
join(" ", @list)拼接，确保空格分隔，不能依赖字符串插值 - 别把
scale和translate拆成两个 Mixin，否则后者会覆盖前者声明
示例：.transform(@translate-x: 0, @rotate: 0deg) { ... } 调用 .transform(10px, 45deg) 才安全。
Webpack 中 less-loader 怎么配 autoprefixer 才生效
关键不是改 Less，而是保证 CSS 输出流经过 autoprefixer：
-
postcss-loader必须在less-loader之后、css-loader之前，顺序错就等于没配 -
postcss.config.js必须存在且导出插件，不能只在package.json写browserslist -
less-loader的additionalData或implementation参数跟前缀无关，别在这儿折腾 - Vite 项目默认集成 PostCSS，只要根目录有
postcss.config.js就自动启用，无需动 Less 配置
什么时候该放弃 Mixin 改用 autoprefixer
以下情况 Mixin 不是省事，是在埋雷：
- 用了
gap、place-items这类 Flex/Grid 新属性——IE 完全不支持，加-ms-前缀纯属误导 - 项目要支持 Android Browser 4.4 或 Safari 9 —— autoprefixer v10+ 才识别这些目标，旧版 Mixin 写死就废了
- 团队里有人手写
-webkit-transition—— autoprefixer 会跳过整条规则，你 Mixin 加的前缀全白费 - 需要按
last 2 versions动态调整输出——Mixin 是静态字符串，做不到
真正难的不是怎么写 Mixin，是怎么说服自己：别写。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
