Guard 表达式是 Less 编译期的规则匹配机制，非运行时条件渲染；语法为 .mixin() when (条件)，仅支持静态比对如类型、值、单位等。
Less 本身不支持运行时逻辑判断，Guard 表达式不是“条件渲染”，而是编译期的规则匹配——它决定哪段样式规则最终被输出，而不是控制 DOM 元素是否显示。
Guard 表达式怎么写：基本语法与常见模式
Guard 是附加在 .mixin() 后面的括号条件，用 when 关键字声明。它不执行 JavaScript，只做类型、值、单位等静态比对。
.size(@n) when (@n = —— 注意是 <code>=，不是 <code>-
.size(@n) when (isnumber(@n)) { ... }和when (ispixel(@n))是常用类型守卫 - 多个条件用逗号分隔表示“或”，用分号分隔表示“且”：
when (@mode = dark), (@mode = black) - Guard 只作用于当前 mixin 调用，不继承、不传播
为什么 if 不能用：Less 没有 if 语句
你搜到的 if(@cond, a, b) 是内置函数，仅用于返回一个值（如颜色、数字），不能包裹选择器或声明块。试图这样写会报错：
.box {<br> // ❌ 错误：if() 不能控制规则是否生成<br> if(@debug = true, color: red, color: blue);<br>}真正起作用的只有 Guard + mixin 组合：
立即学习“前端免费学习笔记（深入）”；
.debug-style() when (@debug = true) {<br> .box { color: red; }<br>}<br>.debug-style() when (@debug = false) {<br> .box { color: blue; }<br>}实际能做什么：主题切换与响应式断点管理
Guard 最实用的场景是预设多套配置，在编译时锁定一套输出，避免冗余 CSS。比如主题变量驱动：
@theme: dark;<br><br>.theme-styles() when (@theme = dark) {<br> body { background: #1a1a1a; color: #eee; }<br>}<br>.theme-styles() when (@theme = light) {<br> body { background: #fff; color: #333; }<br>}<br>.theme-styles();- 修改
@theme值后重新编译，CSS 内容完全替换，不是叠加 - 不要指望在浏览器里动态改
@theme——它在编译阶段就消失了 - 搭配
@media使用时，Guard 可用来开关整套断点定义：.bp(@name) when (@name = mobile) { @media (max-width: 480px) { ... } }
Guard 的边界很清晰：它只在 Less 编译器解析阶段生效，和 HTML、JS、用户交互完全无关。想实现真正的“条件渲染”，得靠 JS 控制 class 或内联样式，或者换用支持运行时逻辑的方案（如 CSS-in-JS 库）。别把它当成 Vue 的 v-if 用。
