应封装「按需、可开关、带版本判断」的补丁逻辑，避免用.vendor-prefix()等黑盒Mixin；对flex、grid等场景拆解为带开关参数的Mixin（如.flex-center(@legacy: true)），用@supports降级，禁用硬编码版本号。
Less里写浏览器前缀补丁，Mixin怎么封装才不翻车
直接说结论：用 .clearfix() 那种思路封装前缀是错的——它掩盖了真实兼容性问题，且容易在现代浏览器里重复注入冗余样式。真正该封装的是「按需、可开关、带版本判断」的补丁逻辑。
为什么.vendor-prefix()这种通用Mixin要慎用
常见错误现象：display: flex 被自动加上 -webkit-、-ms- 甚至 -moz-，结果在 Chrome 100+ 里多出三条无效声明；更糟的是，gap 这种新属性被强行加前缀反而导致失效。
- 现代构建链路（如 PostCSS Autoprefixer）已接管前缀生成，Less 层再做属于重复劳动
- Less 编译时无法感知目标浏览器范围，
@supports也无法动态降级 - 一旦封装成黑盒Mixin，团队成员会无意识地“信任它”，忽略实际支持表（比如
place-items在 Safari 14.1 才支持，但-webkit-补丁早被移除）
实际项目中该怎么做：按场景拆解 + 显式控制
核心原则：只对「确实需要手动干预」的场景封装，且把浏览器条件暴露出来。
- 用
.flex-center(@legacy: true)这类带开关参数的Mixin，@legacy: false时只输出标准语法 - 针对老IE（
IE10/11）的flex布局补丁，单独抽成.flex-legacy()，并注释清楚仅用于target: "IE 11" - 遇到
clip-path这类支持度碎的属性，用@supports (clip-path: polygon(0 0))包裹标准写法，前缀版本放外面作降级，不塞进Mixin - 避免在Mixin里硬编码版本号，改用变量如
@ie11-support: true，统一在配置文件里开关
一个真实可用的 .grid-auto-fit() 封装示例
这个场景典型：CSS Grid 的 auto-fit 在 Safari 15.4+ 才稳定，旧版需回退到 auto-fill + JS 模拟，但Less不能跑JS——所以只处理样式层可兜底的部分：
立即学习“前端免费学习笔记（深入）”；
.grid-auto-fit(@min: 320px, @max: 1fr) {
grid-template-columns: repeat(auto-fit, minmax(@min, @max)));
// Safari < 15.4 不识别 auto-fit，但 auto-fill 行为接近，且无报错
@supports not (grid-template-columns: repeat(auto-fit, minmax(0, 1fr)))) {
grid-template-columns: repeat(auto-fill, minmax(@min, @max)));
}
}
注意：这里没加任何前缀，因为 grid-template-columns 的前缀早已废弃；@supports 检测也比查 UA 字符串靠谱得多。
最容易被忽略的一点：所有这类封装，必须同步更新 browserslist 配置，并让 PostCSS 和 Less 构建步骤对齐目标环境——否则你写的降级逻辑，可能正被 Autoprefixer 在下游悄悄删掉。
