less中when必须嵌套在选择器内使用，如.button { & when (@size = small) { ... } }，不支持直接.cls when (@cond) {}；条件判断仅在编译期生效，依赖预定义变量，无运行时能力。
Less中when关键字必须配合嵌套选择器使用
直接写 .cls when (@cond) { ... } 会报错，Less 解析器要求 when 必须出现在嵌套结构中（即带 & 的上下文里）。这是初学者最常卡住的地方。
正确写法是先声明主体选择器，再用 & when (...) 追加条件分支：
.button {
padding: 12px 24px;
& when (@size = small) {
padding: 8px 16px;
font-size: 12px;
}
& when (@size = large) {
padding: 16px 32px;
font-size: 18px;
}
}
-
@size必须在编译前已定义（如顶层@size: small;或通过 CLI 参数传入） - 多个
when分支互斥，但不会自动 fallback —— 如果@size是medium，则只保留默认样式 - 不支持 JavaScript 风格的
else，想实现兜底需显式写& when (not (@size = small) and not (@size = large))
when 中的表达式不支持运行时计算
Less 的条件判断发生在编译阶段，所有参与比较的值必须是编译期可确定的常量或变量，不能是函数调用结果或 CSS 属性值。
以下写法全部无效：
// ❌ 错误：calc() 是 CSS 运行时函数，Less 不识别 & when (width > calc(100% - 20px)) <p>// ❌ 错误：@media 查询条件无法在 when 中引用 & when (@screen-width > 768px)</p><p>// ❌ 错误：isnumber() 等内置函数返回布尔值，但不能用于 when 判断分支 & when (isnumber(@val))</p>
- 可用的比较操作符只有：
=、!=、>、、<code>>=、，且左右值类型需兼容（比如不能拿颜色和数字比） - 字符串比较区分大小写，
@theme: "Dark"和@theme = "dark"不匹配 - 空值或未定义变量参与比较会静默失败，建议始终初始化变量，例如
@size: default;
Mixin Guards 实际更适合封装可复用逻辑
如果你需要根据条件输出一整套规则（不止一个选择器），Mixin + Guards 比裸 when 更清晰、更易测试。
例如封装响应式断点逻辑：
.responsive-text(@size) when (@size = xs) {
font-size: 12px;
line-height: 1.4;
}
.responsive-text(@size) when (@size = sm) {
font-size: 14px;
line-height: 1.5;
}
.responsive-text(@size) when (@size = md) {
font-size: 16px;
line-height: 1.6;
}
<p>.title { .responsive-text(@text-scale); }</p>
- 每个 Guard 对应一个独立 mixin 定义，避免条件嵌套过深
- 调用时只需传参，无需关心当前作用域是否有
& - 可被多次复用，比如
.subtitle { .responsive-text(@text-scale); } - 注意：Guard mixin 不会自动 fallback，未匹配时整个调用失效（无样式输出），务必确保
@text-scale有合法取值
编译后 CSS 不含任何条件逻辑
Less 的条件能力纯属编译期语法糖，最终生成的 CSS 文件里完全看不到 when、not 或变量痕迹 —— 所有分支都已展开为静态规则。
这意味着：
- 无法在浏览器里动态切换主题（除非重新编译并替换 CSS 文件）
- 服务端渲染时，不同用户请求需对应不同编译输出（比如按
?theme=dark生成不同 CSS） - 调试时别指望在 DevTools 里看到 “条件未命中”，只能检查编译产物是否包含预期规则
- 若需真正运行时条件，得结合 CSS 自定义属性（
--primary-color）+ JS 控制，Less 只负责生成初始变量映射
真正容易被忽略的是：你写的每一个 when 分支，都在增加编译体积。当条件组合多于 3 个维度（如 @theme × @size × @state），产出 CSS 会指数级膨胀，而不是“按需加载”。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
