less本身不自动添加-webkit-等厂商前缀，需借助autoprefixer（推荐）或手动编写带前缀的声明；手写时须按-webkit-、-ms-、标准属性顺序输出，且仅对transform、transition、animation等旧版safari/android必需的属性加前缀。
Less里怎么自动加-webkit-这类前缀？
Less本身不处理CSS前缀，它只是编译器，不会像PostCSS那样自动注入-webkit-、-moz-等厂商前缀。直接写transform: rotate(45deg);，输出就是原样，旧版Safari或Android Browser会失效。
常见错误是以为用.mixin封装就能“兼容”，比如：
.rotate(@deg) {
transform: rotate(@deg);
}
这只会输出单条transform，没前缀，也不解决浏览器支持断层。
- 真正可行的方式是：用
autoprefixer（配合构建工具）或手动写带前缀的声明 - Less中可借助
vendor()函数（需自定义）或直接展开写，例如：-webkit-transform: rotate(@deg); transform: rotate(@deg); - 推荐优先走构建流程加
autoprefixer——它基于Can I Use数据，比手写更准、更省心
手写前缀时哪些属性必须加-webkit-？
不是所有属性都需要前缀，但以下这些在iOS Safari 12之前、Android Browser 4.4之前仍依赖-webkit-：
-
transform、transition、animation、backface-visibility -
user-select（旧版需-webkit-user-select） -
filter（-webkit-filter在Safari 9–12必需） -
flex相关（如display: -webkit-flex在Safari 6–8、Android 4.0–4.3）
注意：border-radius、box-shadow等已基本无需前缀，强行加反而增加体积。
Less mixin里怎么安全地同时输出多套前缀？
可以写一个参数化mixin，但要控制输出顺序（厂商前缀必须在标准属性之前），例如：
.transform(@value) {
-webkit-transform: @value;
-ms-transform: @value;
transform: @value;
}
调用.transform(rotate(30deg));后生成三行，符合CSS覆盖规则。
- 顺序不能颠倒：标准属性放最后，否则会被前面的覆盖
- 不要无脑堆所有前缀——
-o-对transform根本无效，Opera早切Chromium了 - IE10+支持
transform无前缀，但-ms-transform仍需保留以兼容IE9–10
为什么用autoprefixer比Less mixin更可靠？
因为浏览器支持是动态变化的。autoprefixer读取browserslist配置，比如设为"> 1%, last 2 versions, not dead"，它就知道：
- 当前不需要
-webkit-flex（Chrome 29+、Firefox 28+已原生支持） - 仍需为
gap加-webkit-gap（Safari 14.1才开始支持，旧版需前缀） - 完全跳过
-khtml-这种早已废弃的前缀
而Less mixin一旦写死，就和实际支持情况脱节——你改一行package.json就能更新前缀策略，比改几十个mixin现实得多。
真要手写，只在极简场景（比如纯静态页、无构建流程）下用mixin；但凡用Webpack/Vite，autoprefixer是默认选项，别绕开它硬刚。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
