Less Guards 是编译期规则匹配器，非运行时 if；匹配失败则对应 mixin 完全不输出 CSS，而非隐藏样式；支持类型判断（如 isstring、iscolor）、数值比较及逻辑组合，且判断发生在变量求值之后。
Less Guards 是什么，和 if 有什么区别
Less 的 when 不是运行时逻辑，而是编译期的规则匹配器。它不生成 JavaScript 条件分支，而是在解析阶段决定“哪段 mixin 是否参与编译”。这和 CSS-in-JS 中的动态 if 完全不同——Guard 只影响 CSS 输出内容，不产生任何运行时开销。
关键点在于：Guard 匹配失败时，对应 mixin **完全不输出 CSS**；匹配成功才展开。它不是“隐藏样式”，而是“不生成样式”。
怎么写一个基础的 type guard
最常用的是类型判断，比如区分 string、number、color：
.btn(@type) when (isstring(@type)) {
background: lighten(@type, 10%);
}
.btn(@type) when (iscolor(@type)) {
background: @type;
}使用时：
立即学习“前端免费学习笔记（深入）”；
.btn("blue"); // → background: #6699cc;
.btn(#007bff); // → background: #007bff;常见陷阱：
-
isstring("red")返回true，但isstring(red)（未加引号）会报错：Less 把red当作变量或颜色字面量，不是字符串 -
iscolor(#fff)和iscolor("white")都返回true，但iscolor("fff")（带引号但非法）返回false - 多个 guard 同时满足时，**只匹配第一个成功项**，后续同名 mixin 被忽略
用数值比较做响应式断点切换
Guard 支持 =、>、<、=< 等运算符，适合处理断点逻辑：
.col(@span) when (@span = 12) {
width: 100%;
}
.col(@span) when (@span > 0) and (@span < 12) {
width: (@span * 8.33333333%);
}这样调用：.col(6) 输出 width: 50%，.col(12) 输出 width: 100%。
注意：
- 所有比较默认按数值处理，
@span = "12"不会匹配@span = 12—— 类型必须一致 - Less 不支持浮点精度控制，
(@a = @b)比较小数可能因计算误差失败，建议用差值范围代替：abs(@a - @b) < 0.001 - Guard 中不能调用未定义变量或函数，否则整个 mixin 编译失败
组合 guard + 默认参数实现 fallback 行为
Guard 经常和 mixin 默认参数配合，让调用更灵活：
.shadow(@size: 4px, @blur: 8px, @color: rgba(0,0,0,0.15)) when (iscolor(@color)) {
box-shadow: 0 @size @blur @color;
}
.shadow(@size, @blur, @color) when not (iscolor(@color)) {
// 忽略，不生成样式，或抛警告（需配合 .error()）
}这种写法能过滤掉无效颜色值，避免生成错误的 box-shadow: 0 4px 8px invalid-color。
真正容易被忽略的是：Guard 判断发生在变量求值之后。也就是说，@color 如果本身是另一个 mixin 的返回值，它必须先成功计算出一个 color 类型结果，Guard 才能判断。如果中间计算出错（比如除零、未定义变量），Less 直接报错，不会进入 guard 分支。
