less不支持if语句，需用guard（when）实现编译期条件分支；guard仅用于mixin匹配，要求严格相等、区分大小写，且需注意变量定义顺序与类型限制。
Less 里没有 if 语句，但可以用 guard 表达式模拟条件逻辑
Less 本身不支持 if、else 这类运行时条件判断，它的“条件”只在编译期起作用，本质是 mixin 的匹配规则。真正能实现样式分支的机制是 guard —— 它不是控制 CSS 是否生成，而是决定哪个 mixin 版本被调用。
常见误操作是试图写 if (@debug) { color: red; }，这会直接报错：ParseError: expected ')' got '{'。Less 解析器根本不认识这种语法。
- guard 必须写在 mixin 定义末尾，用
when关键字引导 - 只能用于 mixin，不能用于普通规则块或变量赋值
- 比较运算符仅支持
=（严格相等）、=（注意：Less 中=是唯一相等判断符，==和===均无效） - 支持的类型判断函数有
isnumber()、isstring()、iscolor()等，但不能嵌套调用（如isnumber(unit(@val))会失败）
用 guarded mixin 实现主题切换：dark / light 模式
这是 guard 最典型的使用场景：根据一个变量值，输出不同颜色集。关键在于定义多个同名 mixin，靠 when 区分入口。
.theme-colors() when (@mode = dark) {
background-color: #1e1e1e;
color: #f0f0f0;
}
.theme-colors() when (@mode = light) {
background-color: #ffffff;
color: #333333;
}
// 调用
@mode: dark;
.theme-colors();
注意：@mode 必须在调用前定义，且值必须与 guard 中的字面量完全一致（区分大小写，Dark ≠ dark）。如果 @mode 是通过 @import 引入的变量文件中定义的，要确保 import 顺序正确，否则 guard 匹配失败会导致无样式输出，且不会报错 —— 这是最容易被忽略的静默失效点。
避免 guard 常见陷阱：单位、空值和布尔值
Less 中的 true / false 不是布尔字面量，而是未定义变量，直接用于 guard 会出错；同样，带单位的数值（如 16px）和纯数字（16）不相等。
- 想用布尔开关？用字符串
"true"/"false"或数字1/0更可靠 - 判断是否为数字且大于阈值？不能写
when (@size > 12)（Less 不支持运算符比较），改用when (isnumber(@size)) and (@size = 16)这类组合 - 变量可能为空？
when (@color)不起作用 —— 空值在 Less 中仍被视为“存在”，需显式判断when not (@color = '') - 多个条件并列？用
and连接，不要用&&；否定用not，不用!
替代方案：用 CSS 自定义属性 + @media 模拟运行时条件
如果真需要浏览器运行时响应（比如用户系统偏好变更），Less 的 guard 完全无能为力。这时应放弃编译期条件，改用现代 CSS 方案：
:root {
--bg: #fff;
--text: #000;
}
@media (prefers-color-scheme: dark) {
:root {
--bg: #111;
--text: #eee;
}
}
body {
background-color: var(--bg);
color: var(--text);
}
Less 只负责生成静态 CSS，它无法监听 prefers-color-scheme 或 JS 修改的 class。把条件逻辑交给 CSS 原生机制，反而更轻量、可维护性更高 —— 尤其当项目已支持现代浏览器时，硬在 Less 里绕弯子做“条件”，往往得不偿失。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
