less guard 是编译期匹配规则，非运行时条件判断；它根据参数类型或值选择对应 mixin 版本，仅支持字面量、内置函数（如 ispixel、isnumber）和简单比较，不支持变量求值与函数调用。
Less Guard 是什么，它真能做条件判断吗
Less 的 when 不是 JavaScript 的 if，它不运行时求值，也不控制执行流；它只是编译期的“匹配规则”——只有参数满足守卫条件时，对应 mixin 才会被展开。换句话说，when 本质是“选择哪个 mixin 版本”，不是“要不要执行某段逻辑”。这点不搞清，很容易写出永远不生效的守卫。
怎么写一个带 when 的 mixin 并正确触发
Guard 必须写在 mixin 定义末尾，用括号包裹条件表达式；多个条件用逗号分隔（表示 AND），同一 mixin 可重复定义、不同 when 分支互不影响。常见错误是把守卫写成 JS 式布尔表达式（如 @a > 0），但 Less 只支持有限比较：类型检查（isnumber、iscolor）、值等（=）、以及 >/ 仅对数字有效。
.btn(@size) when (isnumber(@size)) and (@size > 12) { font-size: @size * 1px; }-
.btn(@size) when (ispixel(@size)) { font-size: @size; }—— 注意ispixel是 Less 内置函数，不是自定义 - 没匹配到任何
when分支？Less 会静默跳过该 mixin 调用，不会报错也不会 fallback
为什么 when 里不能用变量计算或函数调用结果作判断
Less Guard 在解析阶段就完成匹配，此时变量尚未求值，函数也未执行。比如 @x: unit(12, px); .mixin(@a) when (@a = @x) { ... } 会失败——@x 在守卫中不被展开，@a = @x 实际比较的是符号名而非值。同理，when (contrast(@c) = #fff) 这类函数调用直接报语法错误，因为 Guard 不支持函数调用。
- 守卫中只允许字面量、变量名、内置类型检测函数、简单比较运算符
- 想实现动态逻辑？得靠嵌套 mixin + 参数传递，或者改用 CSS 自定义属性 + JS 控制
- 调试技巧：把守卫条件拆成独立变量（如
@debug: isnumber(@size);），再用.debug { value: @debug; }查看编译后是否为true
实际项目中 Guard 最靠谱的三个用法
别硬套编程思维去“模拟 if-else”。Guard 真正适合的场景很窄：组件多态（如按钮尺寸/状态）、主题色分类（light/dark）、单位归一化（px/rem/em 自动转）。一旦逻辑变复杂，立刻转向其他方案。
- 响应式断点适配：
.col(@span) when (@span >= 12) { width: 100%; }配合@span: 12;全局配置 - 颜色主题开关：
.theme(@mode) when (@mode = dark) { background: #111; }和when (@mode = light) { background: #fff; } - 避免重复声明：
.shadow(@s) when not(iscolor(@s)) { box-shadow: none; }处理空值
Guard 的边界很清晰：它只解决“根据输入类型或值选一组固定样式”的问题。想做运行时切换、用户交互反馈、或依赖 DOM 状态？那已经不是 Less 该管的事了。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
