Less守卫必须写在mixin定义末尾，用when关键字引出，支持=、!=、>、>=、<、<=比较及and/or逻辑；字符串需加引号，变量须已定义，多守卫用逗号分隔表“或”，同一守卫内用and连接表“且”，无匹配时需提供无守卫的默认分支。
Less守卫表达式怎么写才不会报错
Less 守卫（Guard Expressions）不是 CSS 原生语法，必须用在 .mixin 定义里，单独写 if (@color = red) { ... } 会直接编译失败。守卫本质是 mixin 的“触发条件”，只有满足时才会应用该 mixin。
常见错误是把守卫当 JS if 用，或者漏掉括号、等号类型（= 是赋值，= 在守卫里不合法，要用 =？不对——Less 守卫中判断相等必须用 =？其实用的是 =？查证：Less 官方用 = 表示严格相等，但实际只支持 = 和 !=，且仅限于值比较，不支持 ===。
- 守卫必须写在 mixin 参数后，用
when关键字开头，例如：.btn(@type) when (@type = primary) { color: blue; } - 多个条件用逗号分隔，表示“且”；用
,分隔多个守卫块表示“或” - 字符串比较要加引号：
when (@size = "lg")，不加引号会被当成变量名解析 - 守卫里不能调用未定义变量或函数，否则编译时报
variable @xxx is undefined
如何用守卫区分主题色和尺寸组合
典型场景是组件库中根据传入参数生成不同样式，比如按钮同时支持 @theme 和 @size，需要组合判断。这时不能嵌套守卫，而应写多个带不同守卫的同名 mixin。
.button(@theme, @size) when (@theme = dark) and (@size = sm) {
padding: 4px 8px;
background: #333;
}
.button(@theme, @size) when (@theme = dark) and (@size = lg) {
padding: 10px 20px;
background: #222;
}
.button(@theme, @size) when (@theme = light) {
color: #333;
background: #fff;
}注意：Less 不支持 else，所以最后一项没守卫的 mixin 会作为默认分支，但必须确保它排在所有带守卫的同名 mixin 之后，否则会被优先匹配而跳过其他规则。
立即学习“前端免费学习笔记（深入）”；
- 守卫条件顺序很重要——编译器从上到下匹配，第一个满足的就用，不再继续
-
and/or/not是唯一逻辑运算符，不支持&&|| - 数值比较可直接写：
when (@z-index > 999)，但注意单位：带单位的值（如10px）不能和纯数字比，会报Operation on an invalid type
守卫里能用哪些函数和计算
Less 守卫支持有限的内置函数，主要用于类型判断和简单计算，不能调用自定义函数，也不能用 unit() 或 percentage() 等返回新值的函数——守卫只接受布尔结果。
- 可用：
isnumber()、isstring()、iscolor()、ispixel()、isem()、ispercentage() - 可用算术比较：
when (@width * 2 > 100)（前提是@width是 number 类型） - 不可用：
lighten(@color, 10%)—— 这是颜色函数，返回 color，守卫需要 boolean - 不可用：
unit(@val, px)—— 返回带单位的值，无法参与布尔判断
一个实用技巧：用 isstring(@val) and (@val != "") 判断非空字符串，避免传空值导致样式异常。
为什么守卫没生效？常见兼容性陷阱
Less 3.5+ 才支持完整守卫语法，旧版本（如 2.x）只支持简单等值判断，遇到 and 或函数调用会静默忽略守卫，直接应用 mixin——这导致样式错乱却无报错。
- 检查 Less 版本：
lessc --version，生产环境构建工具（如 webpack-less-loader）可能锁定旧版 - Webpack 中 less-loader 默认用 less 3.x，但若项目 lock 文件锁死
less@2.7.3，守卫里的iscolor()会直接编译失败 - 守卫中的变量若来自
@import外部文件，需确保 import 顺序——被依赖的变量必须在守卫前定义 - Vue CLI 项目中，
@/styles/vars.less若通过lessOptions.globalVars注入，这些变量在守卫中可用；但通过@import的变量不行
最易被忽略的是：守卫不支持插值（@{var}），when (@type = @{suffix}) 是非法语法，必须提前把动态值赋给普通变量再判断。
