Less的Guard是编译期条件判断机制，必须配合Mixin使用，支持等值、逻辑运算及多分支fallback，但不可用CSS变量或运行时值，且不改变作用域与优先级。
Less中when Guard表达式的基本写法
Guard不是CSS原生语法，是Less独有的条件判断机制，本质是“带条件的Mixin”，只在条件为真时才展开样式块。它不生成任何运行时逻辑，所有判断都在编译期完成。
关键点：必须配合Mixin使用，when不能单独出现在规则集里；条件表达式里不能用CSS变量或运行时值，只能用Less变量、字面量、内置函数（如isnumber()、isstring()）。
-
.btn(@type) when (@type = primary) { color: blue; }—— 等值判断，注意用单个=，不是== -
.btn(@type) when not (@type = default) { border: 1px solid #ccc; }—— 支持not取反 .size(@n) when (@n > 12) and (@n —— 支持<code>and/or组合
常见错误：Guard条件不触发或报错
最常踩的坑是把Guard当成JavaScript的if——它不支持动态求值，也不支持嵌套在选择器内部。一旦条件不满足，对应Mixin整个被跳过，不会留空规则。
- 错误写法：
div when (@debug) { color: red; }——when只能修饰Mixin，不能修饰普通规则 - 错误写法：
.box { width: when (@fluid) { 100% } else { 800px }; }—— Less不支持三元运算符或内联条件表达式 - 类型陷阱：
@size: "16"; .font(@s) when (@s > 12) { ... }会失败，因为字符串"16"和数字12无法比较，需先用unit()或replace()转换
多条件Guard与fallback策略
一个Mixin可定义多个同名但条件互斥的Guard版本，Less会按顺序匹配第一个成立的分支，天然支持“fallback”逻辑。
立即学习“前端免费学习笔记（深入）”；
例如实现主题色切换：
.theme-color(@theme) when (@theme = light) {
background: #fff;
color: #333;
}
.theme-color(@theme) when (@theme = dark) {
background: #111;
color: #eee;
}
.theme-color(@theme) when not (@theme = light) and not (@theme = dark) {
background: #f5f5f5;
color: #666;
}注意：最后一个分支用not组合兜底，比写@theme = default更安全，避免遗漏未知值。
Guard与merge、!important等修饰符的兼容性
Guard本身不影响CSS优先级，但容易和!important误用冲突。Less允许在Guard分支里写!important，但必须紧贴属性值后，且不能跨行。
- 合法：
color: red !important; - 非法：
color: red; !important;（分号断开后!important失效） - 不推荐在Guard里用
merge（如border+: 1px solid red;），因为不同分支合并行为难预测，易导致意外交互 - Guard不改变变量作用域——分支内声明的变量不会泄露到外部，也不继承外层
@media上下文
Guard真正难的是设计清晰的条件维度，比如该用@theme还是@density做判断点，一旦条件耦合过重，后续维护就容易漏掉某个分支。
