Less Guards 是编译期规则匹配机制，与运行时 if 本质不同；它仅在条件为 true 时输出对应 CSS 规则，否则整条忽略，不支持变量赋值，仅适用于 mixin 或选择器块。
Less Guards 是什么，和 if 有什么区别
Less 的 when 不是 JavaScript 的 if，它不运行时判断，而是在编译期做规则匹配。只有守卫条件为 true 时，对应规则才会被输出到 CSS 中；否则整条规则（包括嵌套）直接被忽略，不会生成任何 CSS。
这意味着你不能用它做“动态值计算”，比如 @color: when (@theme = dark) { #000 }; 这种写法无效——when 只能包裹 .mixin() 或 .selector {} 块，不能包裹变量赋值。
怎么写一个带 Guards 的 mixin 并正确调用
Guard 必须写在 mixin 定义的括号后、花括号前，多个条件用逗号分隔，支持逻辑运算符 and、or、not。
.btn(@type) when (@type = primary) { background: #007bff; }.btn(@type) when (@type = secondary) { background: #6c757d; }.btn(@type) when not (@type = primary) and not (@type = secondary) { background: #ccc; }
调用时只需 .btn(primary);，编译后只输出匹配的那一组声明。注意：所有同名 mixin 必须参数数量一致，否则 Less 会报错 Cannot match any mixins。
立即学习“前端免费学习笔记（深入）”；
常见类型守卫写法和容易踩的坑
Less 内置了类型检测函数，比如 isnumber()、isstring()、ispixel()，它们返回布尔值，可用于 Guard 判断：
.size(@val) when (isnumber(@val)) { width: @val * 1px; height: @val * 1px; }.size(@val) when (ispixel(@val)) { width: @val; height: @val; }.size(@val) when (isstring(@val)) and (@val = auto) { width: auto; height: auto; }
坑点：字符串比较必须加引号或用 =（不是 ==）；ispixel() 对 2rem 返回 false，只认 10px、-5.5px 这类；isnumber(10px) 返回 false，因为带单位就不是 number 类型。
Guard 和媒体查询嵌套混用的实际场景
Guard 很适合配合响应式断点生成不同样式，比如按设备类型输出不同间距规则：
.pad(@size) when (@size = sm) {
padding: 4px;
}
.pad(@size) when (@size = md) {
padding: 8px;
}
.pad(@size) when (@size = lg) {
padding: 16px;
}
<p>@media (min-width: 768px) {
.card { .pad(md); }
}
@media (min-width: 1024px) {
.card { .pad(lg); }
}这里 .pad() 的调用发生在媒体查询内部，Less 会分别对每个媒体块内匹配的 Guard 展开，最终生成干净的、无冗余的 CSS。注意：不要试图在 Guard 条件里写 @media，Guard 只作用于规则是否生成，不控制 CSS 嵌套层级。
真正难的是把业务语义（比如 “移动端”“高对比度模式”）准确映射成可静态判断的变量值，一旦变量来源不可控（如来自 JS 注入），Guard 就完全失效——它只属于预处理器阶段。
