Less 不生成重复前缀，重复源于 mixin 调用不当：多次调用或嵌套调用导致展开重复；应通过变量控制前缀开关、标准属性置后、避免嵌套调用，并与 autoprefixer 明确分工。
Less 本身不生成重复前缀，重复前缀是 mixin 定义不当 + 多次调用导致的样式块重复展开，不是编译器 bug，而是复用逻辑失控。
为什么 .transition() 调用一次就输出三遍 -webkit-transition？
根本原因不是 Less 编译错了，而是你在一个选择器里多次调用了同一个带前缀的 mixin，或者 mixin 内部又嵌套调用了另一个同类 mixin —— Less 是纯文本插入器，每次 .transition() 都会原样展开全部前缀声明。
- 错误写法：
.btn { .transition(); .transition(); }→ 编译后出现两组完整的-webkit-transition/transition - 更隐蔽的错误：
.btn { .animate(); }，而.animate()内部已含.transition()，但你又在外部再写一遍 - 没设默认值的参数导致调用中断后重试，也可能触发意外重复展开（如
.transition(@dur)被.transition()调用时未提供值，Less 可能静默 fallback 并重复插入）
怎样让 .rotate() 只输出一套前缀，且支持按需开关？
关键在「定义即约束」：把浏览器支持逻辑收口到 mixin 内部，用变量控制是否启用某前缀，而不是靠外部调用次数来决定。
- 定义时用
@supports或布尔变量做守卫，例如：.rotate(@deg) when (@enable-legacy-prefix = true) { -webkit-transform: rotate(@deg); } - 标准属性必须放在最后，否则旧版 Safari 会忽略它：
transform: rotate(@deg);必须在-webkit-transform之后 - 避免在 mixin 里再调用其他前缀 mixin（如
.rotate()里不要写.transform()），防止嵌套展开失控 - 调用前统一开关：
@enable-legacy-prefix: false;放在全局变量文件顶部，比逐个删调用更可靠
autoprefixer 和 Less mixin 前缀能共存吗？
能，但必须明确分工：autoprefixer 处理标准 CSS 属性的自动补全；Less mixin 专用于 autoprefixer 不覆盖的场景，二者混用反而增加冗余。
立即学习“前端免费学习笔记（深入）”；
- autoprefixer 不处理：
display: flow-root、backdrop-filter、自定义属性--my-shadow—— 这些必须由 mixin 手动维护 - mixins 里写了
-webkit-backdrop-filter，同时又开了 autoprefixer，结果就是同一属性出现两遍-webkit-backdrop-filter - 检查构建产物最直接：搜索
backdrop-filter，如果看到重复行，说明 mixin 和 autoprefixer 同时生效了 - 推荐策略：关闭 autoprefixer 对实验性属性的支持（
overrideBrowserslist: ["not dead"]），把控制权完全交给 mixin
真正难处理的不是“怎么加前缀”，而是“哪些该加、哪些不该加、加几次”。一旦项目里出现 .btn:hover 里有两套 transition 声明，大概率不是 Less 配置问题，而是组件级样式文件各自封装了相同逻辑，却没走统一入口。这时候删掉某个 @import 比改 mixin 更有效。
