if() 和 when() 均不能控制运行时布局行为，仅在编译期生效：if() 用于单属性值条件取值，when() 仅限 mixin 末尾控制整条规则存在与否；复杂布局需组合 boolean() 预计算、带守卫 mixin 及默认回退。
if() 和 when() 都不能直接“控制复杂布局规则”的运行时行为——它们只在编译期起作用，且各自有明确边界：用错一个，整块样式就消失或报错。
if() 适合单个属性值的条件取值，不是布局开关
if() 是函数，只能返回一个值（比如颜色、长度、字符串），不能生成选择器或嵌套规则。它常被误用于“控制是否显示某组 flex 属性”，但这是错的。
常见错误现象：
-
display: if(@layout == "grid", grid, flex);看似合理，但若@layout是未声明变量，Less 直接报Undeclared variable: @layout -
justify-content: if(@align = "end", flex-end, center);虽能工作，但无法控制grid-template-columns是否出现
正确用法要点：
- 条件必须是静态可求值表达式：
if(@debug, opacity: 0.5, opacity: 1)✅ - 不能依赖运行时状态：
if(has-class("active"), ..., ...)❌（Less 没这函数） - 复杂逻辑要拆解：先用
boolean()提前计算一次，再复用：@is-grid: boolean(@layout = "grid"); display: if(@is-grid, grid, flex);
when() 控制整条规则是否存在，但仅限 mixin 定义末尾
when() 不是语句，不能写在任意位置；它只匹配 mixin 调用时的参数，不响应外部变量变更。
典型翻车场景：
- 在
.container { .flex-row() when (@mode = "desktop") { } }中写when→ 语法错误，when只能跟在 mixin 定义后 -
.layout() when (@type = "sidebar") { .main { width: 70%; } .aside { width: 30%; } }→ 正确，但必须配套无when的兜底定义，否则@type: "full"时整个.layout()不输出任何 CSS
实操建议：
- 多分支按 specificity 从高到低排列：
.layout() when (@type = "sidebar") and (@side = "left") { ... }放前面 - 字面量统一加引号：
when (@theme = "dark")，避免@dark被当变量查找不到 - 否定条件慎用：
when not (@type = "grid")容易遮挡后续分支，优先显式枚举
复杂布局需组合 mixin + 布尔预计算 + 默认回退
真正处理“多模式布局”（如 sidebar / full-width / grid-card）不能靠单个 if 或 when，而要分层：
第一层：用
boolean()将原始变量转为布尔标记@is-sidebar: boolean(@layout = "sidebar");@is-grid: boolean(@layout = "grid");第二层：用带守卫的 mixin 分别封装各模式逻辑
.layout-sidebar() when (@is-sidebar) { .main { float: left; width: 70%; } }.layout-grid() when (@is-grid) { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); } }第三层：提供无守卫的默认行为（否则没匹配时 CSS 彻底丢失）
.layout() { display: block; }
注意：@is-sidebar 这类中间变量必须在调用前定义，且不能依赖未声明变量——Less 不做隐式 false 转换。
编译期条件判断最易被忽略的一点：它完全不感知 DOM 结构、媒体查询变化或 JS 状态。所谓“复杂布局控制”，本质是提前生成多套静态 CSS，然后靠类名切换来激活——when 和 if 只负责决定哪套该被编译出来。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
