less 的 when 守卫仅在编译期生效，不支持运行时条件渲染；必须依附于 mixin 或嵌套选择器中的 &，且仅支持字面量比较、数字比较和有限类型判断，多分支按顺序匹配，无匹配则静默跳过。
Less 的 when 守卫不能实现运行时条件渲染，它只在编译期匹配变量值，生成静态 CSS。你写下的 when 条件，页面加载后就固定了，不会随 class 切换、媒体查询变化或 JS 操作而更新。
守卫必须依附于 mixin 或嵌套选择器才能生效
单独写 .btn when (@size = "large") { } 会报错——Less 不允许这种语法。守卫只能出现在两个地方：
- 定义 mixin 时：比如
.btn(@size) when (@size = "large") { padding: 16px; } - 嵌套选择器内配合
&：比如.btn { & when (@size = "large") { padding: 16px; } }
后者是语法糖，本质仍是声明并立即调用一个匿名 mixin。漏掉 & 或把 when 放在属性行里（如 color: when(@dark) #000;），都会直接编译失败。
守卫里的比较只认字面量和有限内置函数
你不能在 when 里做算术运算、调用自定义函数，甚至不能用 unit() 或 percentage() 转换单位后再比。常见有效写法只有：
- 字符串相等：
when (@mode = "mobile")（注意引号，不加引号会被当变量） - 数字比较：
when (@n > 12)（@n必须是纯数字，12px是 pixel 类型，不是 number） - 类型判断：
when (ispixel(@val))、when (iscolor(@c))，但iscolor("red")返回 false（字符串 ≠ 颜色值）
像 when (@width > calc(100% - 20px)) 或 when (contrast(@c) = #fff) 全部非法，编译器直接报错。
多个守卫分支按顺序匹配，无匹配则静默跳过
Less 不会 fallback，也不会报错提示“没匹配到”。例如：
.text(@size) when (@size = "small") { font-size: 12px; }
.text(@size) when (@size = "large") { font-size: 18px; }
如果调用 .text("medium")，结果是——什么 CSS 也不输出。容易被忽略的关键点是：
- 分支顺序很重要：先写的守卫优先匹配，
when (@n >= 0)放前面会让when (@n > 10)永远执行不到 - 必须显式提供兜底：要么加
.text(@size) { font-size: 14px; }（无守卫版本），要么用when (default()) - 守卫不控制选择器是否输出，只决定该 mixin 内容是否展开——就算
.btn选择器本身写了，守卫不匹配，里面规则照样不出现
真正需要动态响应 DOM 或媒体查询时，守卫完全不合适。这时候该用 CSS 自定义属性 + JS，或者靠 class 切换来驱动预编译好的多套规则。守卫的价值，仅在于减少手写重复样式、统一管理主题开关或归一化单位这类编译期可确定的逻辑。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
