less guard必须写在mixin定义末尾的.mixin() when (...) { }中才生效，仅支持=、!=、>、>=、
Less Guard表达式怎么写才生效
Guard不是CSS选择器里的伪类，也不是JavaScript的if语句，它本质是Less编译时的匹配规则，只在mixin定义中起作用。没写在.mixin() when (...) { ... }里，Guard就完全不触发。
常见错误是把Guard当成运行时逻辑：比如想在.btn { color: when(@theme = dark) #000; }里直接用——这会报错，因为Less不支持属性级条件表达式。
- Guard必须依附于
mixin或extend，不能独立存在 - 比较操作符只能用
=、!=、、<code>>=、、<code>>，不支持===或&&/||（得用and、or、not） - 字符串比较要加引号：
when (@mode = "mobile")，不加引号会被当作变量解析
多个Guard分支怎么组织才不冲突
Less按声明顺序匹配Guard，遇到第一个为true的就执行对应分支，后面的同名mixin即使也满足条件也不会运行。这点和CSS层叠无关，纯编译期行为。
典型场景是响应式断点适配：
PigX UI Pro 前端开发指南 - Vue 3 + TypeScript + Element Plus。当用户提到 PigX UI、PigX 前端、lgb-mgui 项目、Vue 3 企业级后台开发、Element Plus 后台开发时使用此技能。
.text-size(@size) when (@size = small) {
font-size: 12px;
}
.text-size(@size) when (@size = medium) {
font-size: 14px;
}
.text-size(@size) when (@size = large) {
font-size: 16px;
}
// 调用 .text-size(small); → 编译出 font-size: 12px;
- 避免Guard条件重叠，比如
when (@n > 0)和when (@n >= 0)连写，后者永远不执行 - 可以加默认分支：
.text-size(@size) when (default()) { ... }，它总在最后兜底 - 不推荐用
isnumber()这类类型判断做主分支逻辑，容易因单位隐式转换出错（如10px不是number）
Guard里能用哪些函数和变量
Guard支持有限的内置函数，主要用于类型检查和简单运算，但不能调用自定义mixin或访问CSS属性值。可用函数包括：isnumber()、isstring()、iscolor()、iskeyword()、ispixel()等。
变量方面，只认编译时已定义的变量（含参数），不支持@media查询中的动态值或JS注入的变量。
-
iscolor(#fff)返回true，但iscolor("red")是false（字符串不是颜色值） -
ispixel(12px)为true，ispixel(1.5em)为false - 算术表达式允许：
when (@width > (@base * 2))，但@base必须已在作用域中定义 - 禁止在Guard里用
unit()、percentage()等转换函数——它们返回值无法参与布尔判断
为什么Guard编译后没生成CSS
最常被忽略的一点：Guard只控制mixin是否展开，不控制选择器是否输出。如果mixin里没写任何样式声明，或者所有Guard条件都不满足，最终CSS里就什么都没有。
调试建议：先确认mixin被调用了；再检查传入参数是否与Guard条件严格匹配（注意空格、引号、单位）；最后用lessc --log-level=2看编译日志里是否有“skipped mixin”提示。
- 传参带单位时易出错：
.btn-color(red)✅，.btn-color("red")❌（字符串不等于关键字red） - 嵌套调用时，Guard只对当前
mixin生效，父级参数不会自动透传 - Webpack或Vite中启用
less-loader的javascriptEnabled选项会导致Guard失效——该选项禁用安全限制的同时也绕过了Guard机制
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
