less guard必须写在mixin定义中，语法为.mixin(@a) when (条件)，支持=、>、=、
Less Guard条件语句怎么写才生效
Guard 不是 JavaScript 的 if，它只在编译期起作用，且必须写在混合（mixin）定义里，不能单独用在规则块中。写错位置或语法不匹配，Less 会直接忽略 Guard，退化成无条件执行。
正确写法是：在 mixin 名称后加括号，括号内用 when 关键字 + 条件表达式。多个条件用逗号分隔，等价于逻辑“与”；多个同名 mixin 分别带不同 Guard，则等价于“或”。
.btn(@type) when (@type = primary) { background: #007bff; }.btn(@type) when (@type = danger) { background: #dc3545; }- 调用
.btn(primary)时，只有第一个匹配，第二个被跳过
支持哪些比较操作符和类型判断
Less Guard 支持 =（值相等）、==（严格相等）、>、、<code>>=、，但不支持 <code>!= 或 !== —— 要取反得用 not 包裹，比如 when not (@size = small)。
类型判断靠内置函数：isnumber()、isstring()、iscolor()、iskeyword() 最常用。注意 iscolor(#fff) 返回 true，但 iscolor("red") 是 false（字符串不是 color 类型）。
.shadow(@val) when (isnumber(@val)) { box-shadow: 0 0 @val * 2px rgba(0,0,0,0.2); }.shadow(@val) when (isstring(@val)) { box-shadow: @val; }- 传
.shadow(4)和.shadow("0 2px 8px #000")会走不同分支
为什么 Guard 没触发？常见失效原因
Guard 失效往往不是语法错，而是变量未被识别为预期类型，或比较值类型不一致。Less 对字符串比较区分引号： "block" ≠ block（后者是 keyword），10px 是 dimension，不是 number。
- 避免直接比较带单位的值：
@w: 100px，不能写when (@w > 50)（单位参与运算会报错），应先用unit(@w, px)提取数值 - 传参时别漏掉引号：调用
.theme(dark)中的dark是 keyword，而.theme("dark")是 string，Guard 必须跟实际传入类型一致 - 嵌套 mixin 时，外层变量不会自动进入内层 Guard 作用域，需显式传参
Guard 和 CSS @media 有什么区别
Guard 完全运行在编译阶段，输出的是静态 CSS，和运行时无关；而 @media 是浏览器解析的响应式规则。两者可共存，但目的不同：Guard 用来按配置生成多套样式（如主题切换），@media 用来适配视口变化。
一个典型组合是：用 Guard 生成 light/dark 主题类，再在每个主题内部用 @media 处理断点。不要试图用 Guard 模拟 @media (prefers-color-scheme: dark) —— 那是运行时行为，Less 编译时根本不知道用户系统偏好。
真正容易被忽略的是 Guard 的“编译一次性”特性：它不产生冗余 CSS，但也不能动态切换。你写的每个分支，只要被调用过，就会出现在最终 CSS 里；没被调用的，彻底消失 —— 这既是优势，也是限制。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
