Less守卫不支持多端条件编译，仅用于混合调用时匹配预定义变量；多端样式需靠构建工具注入变量（如Webpack/Vite），再结合守卫分发规则。
Less 本身不支持 if 守卫（guard）做“多端条件编译”——这不是语法限制问题，而是概念混淆：守卫用于混合（.mixin()）的匹配分支，不是构建时环境判断；所谓“多端样式”（如 PC / 移动端 / 小程序）需靠外部变量注入或构建流程控制，守卫只是配合它做逻辑分发。
Less 守卫只能匹配传入参数，不能读取运行环境
守卫（when）只在调用混合时，根据你传进去的值做静态比较，比如 @device: mobile 这个变量必须提前定义好，Less 编译器不会自动识别 UA、屏幕宽度或构建目标平台。
- 错误认知：
.btn() when (is-mobile())——is-mobile()不是内置函数，也不被支持 - 正确用法：守卫只响应你手动传入或顶层定义的变量，例如
@platform: 'weapp' - 守卫不触发 CSS 输出，只决定哪个混合体生效；未匹配的分支完全不生成 CSS
实现多端样式的实际路径：变量 + 守卫 + 构建注入
真正可行的做法是把终端类型作为变量传入 Less 编译流程，再用守卫分发样式。例如 Webpack 的 less-loader 支持 modifyVars，Vite 可通过 css.preprocessorOptions.less.additionalData 注入变量。
- 定义混合时用守卫区分：
.button-style(@platform) when (@platform = 'web') { padding: 12px 24px; } .button-style(@platform) when (@platform = 'weapp') { padding: 8px 20px; border-radius: 4px; } - 调用时必须显式传参：
.button-style(@platform)，否则守卫无值可比 - 若用
@platform: 'web'顶层定义，需确保它不被后续@platform: 'weapp'覆盖（Less 变量是“最后定义生效”，不是作用域覆盖）
容易踩的坑：守卫不支持嵌套判断和动态值
守卫表达式能力很弱，不能调用函数（除少数内置如 isnumber()）、不能拼接字符串、不能访问属性值——所有依赖都得是编译前已知的字面量或变量。
立即学习“前端免费学习笔记（深入）”；
- 无效写法：
.mixin(@p) when (string-append(@p, '-suffix') = 'web-suffix')——string-append不在守卫允许函数列表中 - 无效写法：
.mixin(@p) when (get-unit(10px) = 'px')——get-unit不能在守卫中使用 - 有效但易错：
.mixin(@p) when (@p = 'h5') or (@p = 'mp')，注意or两侧必须用括号包裹子条件 - 移动端适配别指望守卫自动响应
@media，守卫和媒体查询无关；响应式仍要靠@media写，守卫只管“哪套基础规则启用”
守卫不是开关，而是模板匹配器；多端差异的本质是构建配置差异，守卫只是让同一份 Less 文件能安全地输出不同结果。漏掉变量注入步骤，或误以为守卫能探测设备，是绝大多数人卡住的地方。
