less不支持if语句，需用if()函数处理单值条件或带守卫的.mixin控制css块生成；守卫未覆盖所有情况时可能导致样式丢失，应添加默认分支兜底。
Less里没有if语句，但可以用函数模拟条件逻辑
Less本身不支持if、else这类运行时条件判断，所有“条件”必须在编译期通过函数返回值体现。最常用的是if()函数（Less 3.5+内置），它接收三个参数：if(条件, 真值, 假值)，返回对应分支的值——注意：它只返回**值**，不能直接输出多条CSS规则或嵌套选择器。
比如想根据变量@support-flex决定是否启用display: flex及其IE10前缀：
@support-flex: false;
.container {
display: if(@support-flex, flex, block);
display: if(@support-flex, -ms-flexbox, block); // IE10
}
这能工作，但仅限于单属性单值替换；若需要整块规则开关（如加不加flex-direction），就得换思路。
用.mixin + guard 实现带作用域的条件CSS块
真正控制“是否生成某段CSS”的方式是带守卫（guard）的混合宏（.mixin）。守卫类似条件过滤器，只有匹配时才会展开内部规则。
- 守卫写法是
when (条件)，支持=、!=、>、等比较，也支持<code>isnumber()、isstring()等类型判断 - 多个守卫可并列，用逗号分隔，表示“或”关系；用分号分隔表示“与”
- 守卫只影响当前.mixin是否被调用，不影响变量作用域
例如为旧版Safari（@safari-version: 9）补-webkit-前缀：
.flex-container(@safari-version) when (@safari-version = 10) {
display: flex;
flex-direction: row;
}
// 调用
.flex-container(9); // 输出带-webkit-的版本
避免把条件逻辑硬塞进属性值里
常见错误是试图用if()拼接整个声明，比如if(@legacy, 'margin: 0; padding: 0;', '')——这会报错，因为if()返回字符串，而Less不允许属性值是未解析的字符串字面量。
正确做法始终是：用守卫+mixin封装规则块，或用函数控制单个值。以下写法是错的：
// ❌ 错误：if()不能返回声明块
.container {
if(@legacy, margin: 0; padding: 0;, color: red;);
}
应该拆成两个独立.mixin，或用一个.mixin包裹全部可变规则：
.legacy-layout() when (@legacy = true) {
margin: 0;
padding: 0;
font-size: 12px;
}
.legacy-layout() when (@legacy = false) {
color: red;
line-height: 1.5;
}
兼容性代码生成的关键是提前确定编译目标
Less是静态编译器，所有“条件”都必须在编译前由变量或函数结果确定，无法读取浏览器UA或运行时特性。所以所谓“兼容代码”，本质是人工预设目标环境（如@ie11: true），再靠守卫分流。
容易忽略的一点：多个守卫分支必须覆盖所有可能值，否则未匹配时该.mixin完全不生效，可能导致样式丢失。比如：
.grid(@mode) when (@mode = 'flex') { display: flex; }
.grid(@mode) when (@mode = 'float') { float: left; }
// 如果传入 @mode: 'table'，这个.mixin不会输出任何东西
如果存在未知值，建议加一个默认分支：.grid(@mode) when not (@mode = 'flex') and not (@mode = 'float')，或者用default()函数（Less 4.0+）兜底。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
