Less 不支持 if() 等运行时条件判断，仅支持 when guard 混合；guard 依赖已定义变量、显式调用及 javascriptEnabled 开启，否则恒为 false 或报错。
Less 的 if()、when 等条件语法根本不存在——它不支持运行时条件判断，所谓“条件不生效”，其实是误用了语法或混淆了作用域。
Less 没有 if() 函数，只有 guard 条件混合（mixin）
你写的 if(@debug, color: red, color: blue) 会直接报错或静默失效，因为 Less 4.x 完全移除了该函数。真正可用的是带 when 的 mixin：
-
.btn when (@size = large) { font-size: 18px; }—— 必须配合.btn()调用才触发 - guard 只在 mixin 被调用时求值，不会自动展开；没调用就等于没写
-
when后面不能跟表达式：when (@width > 500px)合法，但when (unit(@width) = "px")会报错（unit() 返回字符串，不能直接比较）
@import 和变量作用域导致 guard 判断永远为 false
Guard 中引用的变量必须在 mixin 定义前已定义，且不能跨 @import 隐式提升。常见陷阱：
- 入口文件
main.less里先@import "mixins.less"，再@debug: true;→mixins.less中的.log when (@debug)看不到@debug，判断恒为 false - Vue 单文件组件中
是独立作用域，@import "@/styles/vars.less"必须显式写在该内部 - 别名路径未加
~：@import "@/styles/vars.less" 不会加载，变量始终 undefined，guard 全部跳过
用 javascriptEnabled: true 才能启用部分逻辑函数
像 isnumber()、iscolor()、boolean() 这类判断函数，默认被禁用。Vite 或 Webpack 中若没开 JS 支持，它们会原样输出或报错：
- Vite 配置需确保
less.preprocessorOptions.javascriptEnabled === true - Webpack 的
less-loader需传javascriptEnabled: true（旧版叫math: always） - 开启后仍要注意：guard 中不能调用
iscolor(@x)如果@x是未定义变量——Less 会提前中断，不进 guard 分支
替代方案：用 CSS 原生特性兜底，别强求 Less 判断
Less 编译期无法响应屏幕尺寸、用户偏好等动态条件。真要“条件生效”，得交给浏览器：
- 媒体查询写死：
@media (prefers-color-scheme: dark) { .text { color: white; } }，不要试图用@if包裹 - CSS 变量 + JS 控制：
:root { --theme: light; }，JS 改document.documentElement.style.setProperty('--theme', 'dark')，然后用color: var(--text-color); - 构建时环境变量（如 Vite 的
import.meta.env.MODE）可配合additionalData注入常量，但仍是编译期静态值，不是运行时判断
最易被忽略的一点：Less 的 guard 不会继承父级作用域变量，也不支持嵌套判断；你以为的“条件分支”，大概率只是 mixin 没被调用，或者变量根本没传进去。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
