Less的when规则在编译期控制整块样式是否生成，要求变量必须预先声明、条件为静态布尔表达式，且@import顺序须严格遵循变量先于文件引入；它不支持运行时切换或嵌套，也不能替代if()函数的单属性条件取值。
用 when 规则控制整块样式是否生成
Less 的 when 不是运行时开关，而是在编译期决定某段 CSS 是否进入最终输出。它只对规则集（selector block）起作用，比如一个组件、一组媒体查询或整个主题模块。
常见错误是把它当 JavaScript 的 if 用：写成 .btn when (@enable-btn) { ... }，但若 @enable-btn 根本没定义，Less 直接报错 Undeclared variable: @enable-btn，不会跳过。
-
@enable-btn必须提前声明，哪怕只是@enable-btn: true;或通过构建工具注入 -
when后面的条件必须是静态布尔表达式，支持=、!=、>等比较，也支持iscolor()等类型检查 - 多个条件用
and/or连接，且必须加括号：.module when (@env = "prod") and (@debug = false) - 不能嵌套
when，也不能在when内部再写另一个when
if() 函数只能改单个属性值，不能删整条规则
如果你只想让某个属性有条件地生效（比如只在深色模式下加 box-shadow），用 if() 是对的；但它无法让 .card { ... } 整个选择器消失。
典型误用：if(@include-card, .card { ... }, ) —— 这语法非法，if() 返回的是值，不是规则块。
- 正确姿势：
box-shadow: if(@dark-mode, 0 2px 8px rgba(0,0,0,0.15), none); -
if()的第一个参数必须是明确可求值的布尔表达式，不能是裸变量：if(@dark-mode, ..., ...)错，if(@dark-mode = true, ..., ...)对 - 想兜底未定义变量？得先用
isdefined()—— 但 Less 原生不提供这个函数，得靠iscolor()、isnumber()等间接判断
真正实现“模块级开关”的推荐做法
所谓“模块编译开关”，本质是控制某组样式是否被 @import 进来。Less 本身不支持动态路径导入，但可以通过构建工具配合 @import (reference) 或条件变量实现。
- 把模块抽成独立文件（如
features/print.less），内部用when包裹全部规则 - 主入口统一声明开关变量：
@feature-print: false;，且必须放在所有@import之前 - 引入时用
@import "features/print.less";，不要用(reference)—— 否则when条件失效（reference只导入变量和 mixin，忽略规则） - Webpack/Vite 构建时可通过
less-loader的additionalData注入变量，实现不同环境不同开关值
容易被忽略的编译顺序陷阱
变量声明位置错了，when 就永远不触发。Less 按文本顺序解析，不是按文件依赖图。
- 错误顺序：
@import "components/button.less"; @feature-button: true;→button.less编译时@feature-button还不存在 - 正确顺序：
@feature-button: true; @import "components/button.less"; - 如果变量来自主题文件（如
themes/dark.less），确保该文件在开关变量之后、组件文件之前导入 -
@import (once)不能解决这个问题——它防重复，不改顺序
真正起作用的“开关”，从来不是某一行 when 语句，而是变量定义、@import 顺序、构建注入三者严丝合缝的配合。漏掉任意一环，模块就照常编译，开关形同虚设。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
