less守卫是编译期mixin匹配机制，非运行时if语句；仅支持有限操作符和类型函数，需显式类型校验与default()兜底，不感知媒体查询上下文。
Less 中的守卫（Guard）不是 if 语句，而是匹配条件
Less 守卫不是运行时逻辑分支，而是在编译期用于**选择哪个 mixin 被匹配执行**。它不生成 if 代码，也不支持任意表达式——只支持有限的操作符和类型检查函数。
常见误用是试图用守卫做动态判断，比如 .btn when (@size = 'large') { ... } 看似合理，但一旦 @size 是变量而非字面量（如来自另一个 mixin 参数），守卫可能完全不触发，因为 Less 不做运行时求值。
- 守卫只在 mixin 声明时定义匹配规则，不支持嵌套守卫或逻辑组合（
and/or需用逗号分隔多个守卫） - 支持的操作符仅限：
=、!=、>、、<code>>=、，且左右必须是同类型（数字对数字、字符串对字符串） -
isnumber()、isstring()、iscolor()等类型函数可安全使用，比直接比较更鲁棒
如何正确写带守卫的 mixin 并避免“不生效”问题
守卫失效最常发生在参数未被明确传递或类型隐式转换失败时。例如传入 '12px' 给期望数字的守卫，when (@width > 10) 会直接跳过该分支。
推荐写法是：显式类型校验 + 默认 fallback + 字面量优先。
.button-size(@size) when (isstring(@size)) and (default()) {
font-size: 14px;
}
.button-size(@size) when (isnumber(@size)) {
font-size: @size * 1px;
}
.button-size(@size) when (default()) {
font-size: 16px;
}
- 每个守卫分支必须有唯一匹配路径，
default()保证兜底 - 避免混合单位：
@size: 12（纯数字）比@size: 12px更易参与数值守卫 - 调用时必须传参，
.button-size(14)才会命中第二条；.button-size()不会自动 fallback，需显式调用.button-size(default)或依赖default()守卫
守卫与媒体查询嵌套的兼容性陷阱
Less 允许在 @media 内部使用守卫 mixin，但守卫本身**不感知媒体查询上下文**——它只管参数是否匹配，不管当前是否在 @media (min-width: 768px) 里。
这意味着你不能靠守卫“检测屏幕宽度”，也不能指望 when (@screen = 'mobile') 在媒体查询内自动切换。它仍是静态编译时行为。
- 正确做法：把响应式逻辑拆到 mixin 外层，用变量控制，再传入守卫；例如
@breakpoint: mobile;→.layout(@breakpoint) - 错误做法：在
@media块里写.foo when (max-width —— 这语法非法，Less 不解析 CSS 媒体特征为变量 - 守卫无法替代 CSS 条件规则（如
@container），它只是 Less 编译期的“模板路由”
调试守卫不触发的三个关键检查点
当预期样式没生成，大概率是守卫根本没匹配上。别猜，按顺序查：
- 检查传入值是否为字面量：
.mixin(@val)调用时，@val是否已被赋值？若来自另一个未执行的 mixin，它仍是未定义状态 - 确认类型一致性：用
isnumber(@x)替代@x > 5，再配合.debug { value: @x; type: isnumber(@x) }输出验证 - 留意作用域：守卫中引用的变量必须在 mixin 参数列表中声明，或来自全局/父级作用域；局部
@var: ...不可用于守卫条件
守卫的威力在于组织多态样式逻辑，但它的“静态性”和“类型敏感”是双刃剑——写得越简明，越容易漏掉隐式类型转换这层水下逻辑。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
