less中带前缀的mixin应强制传参、不设默认值，如.user-select(@value)，显式写出-webkit-user-select等各前缀，禁用字符串拼接属性名；若已配postcss autoprefixer，则less层只写标准属性，交由其自动补全。
Less里怎么写带前缀的Mixin才不会漏掉浏览器兼容性
直接结论：用无默认值、强制传参的 .user-select(@value) 这类写法，不设默认值，不拼字符串，每个属性单独写死前缀。Less 本身不支持自动加前缀，所谓“统一前缀”只是靠人工把 -webkit-、-moz-、user-select 全列出来。
常见错误是写成 .prefix(@prop, @val) 想通用处理所有属性——这会导致编译失败或生成非法 CSS，因为 Less 无法在编译期判断 @prop 是不是合法属性名，也不做运行时校验。
- 只封装**确定要加前缀且长期不变**的属性，比如
user-select、appearance、transform - 每个前缀必须显式写出：
-webkit-user-select: @value;，不能靠字符串拼接 - 参数不设默认值，避免调用时漏传导致生成空声明（如
user-select: ;） - 别试图用
whenguard 动态判断浏览器类型——Less 没有 UA 检测能力，所有前缀都在编译期静态输出
为什么不能用 .prefix(@prop, @val) 这种万能Mixin
因为 Less 不是 JS，它不解析变量内容，@prop 只是个字符串占位符，放进属性名位置会直接报错：Expected property name。
比如你写 @prop: "user-select"; @{prop}: @val;，Less 编译器会尝试把字符串 "user-select" 当作标识符，但 CSS 属性名不允许引号，结果就是语法错误。
-
@{prop}插值只能用于属性值或选择器，不能用于属性名本身 - 想“动态属性名”，得靠 PostCSS 的
autoprefixer，不是 Less 的事 - 如果真要用插值，仅限于选择器或媒体查询条件，比如
@media screen and (min-width: @{breakpoint-sm}) - Less Mixin 的作用是生成确定结构的 CSS 块，不是运行时逻辑引擎
PostCSS + Less 混合使用的正确姿势
如果你项目里已经配了 postcss-loader 和 autoprefixer，那 Less 层就该彻底放弃手动写前缀——否则会出现重复前缀、顺序错乱、维护两套规则的问题。
Webpack 配置中确保 postcss-loader 在 less-loader 之后执行：
module: {
rules: [
{
test: /\.less$/,
use: [
'style-loader',
'css-loader',
{
loader: 'postcss-loader',
options: { plugins: [require('autoprefixer')] }
},
'less-loader'
]
}
]
}
- Less 文件里只写标准属性：
user-select: none;，让 autoprefixer 自动补全 - 删掉所有手写的
-webkit-等前缀 mixin，避免和 PostCSS 冲突 - 如果非要 Less 层控制（比如老项目没上 PostCSS），那就只封装极少数确定项，且每个都人工核对 MDN 兼容表
- 注意 autoprefixer 默认目标浏览器版本，可通过
browserslist配置收紧或放宽
容易被忽略的编译顺序陷阱
Less Mixin 调用时，参数值取的是**调用点所在作用域**的变量值，不是定义点的。这意味着如果你在主题文件里重写了 @user-select-value，但 Mixin 定义在组件文件里，而组件又先于主题被 @import，那 Mixin 依然用旧值。
- 所有主题变量文件（如
themes/dark.less）必须放在所有组件 Mixin 文件之前@import - 不要指望 Mixin 内部用
@user-select-value: none;设默认值能覆盖外部传入——它只在 Mixin 内部生效，且优先级低于调用时传入的参数 - 验证方式：在 Mixin 里加注释
// debug: @value = @value，看编译后 CSS 是否是你期望的值 - 最稳妥的做法是：参数强制传，不依赖任何外部变量，把兼容性责任收束到调用方
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
