less的when是编译期守卫，非运行时条件；必须依附mixin或嵌套选择器，不可单独使用；类型需显式统一，须配默认分支，且仅响应编译时变量值。
when 不是运行时 if，它只在编译时匹配变量值，生成静态 CSS；想靠它响应点击、:hover、@media 或 JS 切换 class？做不到。
为什么 when 写了却没生效？
常见错误是把 when 当成独立规则用：.btn when (@size = "large") { ... } —— Less 解析器直接报错或静默跳过。when 必须依附于一个可展开的结构：mixins 或带 & 的嵌套选择器。
- ✅ 正确（Mixin 形式）：
.btn(@size) when (@size = "large") { padding: 16px 32px; }，调用时写.btn("large"); - ✅ 正确（嵌套形式）：
.btn { & when (@size = "large") { padding: 16px 32px; } } - ❌ 错误：
.btn when (@size = "large") { ... }（语法非法） - ❌ 错误：
width: when (@fluid) { 100% } else { 800px };（when不能当内联表达式用）
when 条件里字符串和数字比较总失败？
Less 不自动类型转换，@size: 16 和 @size: "16" 在 when 中完全不等价，也不会报错，只是整个分支被跳过。
- 统一用引号包裹字面量：
when (@theme = "dark")比when (@theme = dark)安全（后者会查变量@dark） - 用
isnumber()/isstring()做前置判断：.pad(@val) when (isnumber(@val)) { padding: @val * 1px; } - 单位要显式处理：
when (unit(@n, px) > 14px)，别混用px和rem - 未定义变量参与比较（如
@mode没声明）会导致守卫失效，建议顶层初始化：@mode: "default";
多个 when 分支怎么避免漏匹配或误匹配？
Less 按定义顺序匹配，遇到第一个为 true 的就停，后面不管多精确都不会再检查；没有隐式 else，漏掉兜底就可能啥都不输出。
- 最具体的条件放前面，比如：
when (@theme = "dark") and (@density = "compact") - 否定条件慎用：
when not (@size = "small")会匹配未定义值，容易误伤 - 显式兜底推荐写法：
when not (@size = "small"), not (@size = "large")（逗号表示 or），等价于“既不是 small 也不是 large” - 一定要提供无
when的默认版本：.btn(@size) { /* 默认样式 */ }，否则传入其他值时整个 mixin 不生效
能用 when 响应屏幕尺寸变化或用户交互吗？
不能。它只看编译时变量值，对 @media、:hover、data- 属性、JS 修改的 class 全无感知——这些都得靠真实 CSS 规则或 JS 控制。
比如你设了 @screen-width: 1200px，.header when (@screen-width > 1024px) 编译后只会输出一条静态规则；哪怕用户缩放浏览器，也绝不会切换到中屏或小屏样式。
真正容易被忽略的点是：when 的逻辑本质是“编译期代码裁剪”，不是“样式条件渲染”。你写的每条 when 分支，最终要么全部编译进 CSS，要么全被剔除——不存在运行时分支切换这回事。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
