如何修复Less在处理CSS三元运算时的逻辑判断错误？-css教程-PHP中文网

less 不支持 css 三元运算，仅可用 when 守卫配合 mixin 实现编译期分支逻辑；必须定义默认分支，严格区分类型与引号，且无法响应运行时状态变化。

如何修复less在处理css三元运算时的逻辑判断错误？

Less 里没有 CSS 三元运算，所谓“三元运算”是开发者误把 JavaScript 或其他语言的思维套进 Less；真正能用的只有 when 守卫 + Mixin 分支，且只在编译期生效，不能响应运行时变化。

Less 根本不支持内联三元表达式

常见错误是写类似 width: when (@fluid) { 100% } else { 800px }; 这种语法——Less 解析器直接报错或静默跳过。它不是 JS，没有 ?: 操作符，也不允许把 when 当作表达式嵌入属性值中。

when 必须依附于 Mixin 或嵌套选择器，不能独立成句
想实现“根据变量选值”，必须拆成多个 Mixin 分支，或用默认参数兜底
别试图在属性值里做条件判断，Less 不解析运行时逻辑

正确用 `when` 实现分支逻辑

守卫本质是编译期匹配规则，靠顺序和类型严格性控制输出。例如要根据 @size 输出不同 padding：

CSS婚礼策划服务机构宣传网站模板

CSS婚礼策划服务机构宣传网站模板是一款适合提供婚礼策划和婚庆服务机构宣传网站模板下载。提示：本模板调用到谷歌字体库，可能会出现页面打开比较缓慢。

下载

.btn(@size) when (@size = "large") {
  padding: 16px 32px;
}
.btn(@size) when (@size = "small") {
  padding: 4px 8px;
}
.btn(@size) {
  padding: 8px 16px; // 默认分支，必须有
}

所有 when 分支按定义顺序匹配，遇到第一个 true 就停，后面不执行
@size: "large" 和 @size: large 类型不同，后者会被当变量查，找不到就失效
字符串比较务必加引号：when (@theme = "dark")，不是 when (@theme = dark)

类型混用导致守卫静默失效

Less 不自动转换类型，@size: 16 和 @size: "16" 在 when 中完全不等价，比较失败也不会报错，只是跳过整个分支。

用 isstring() 或 isnumber() 做前置判断：.pad(@val) when (isnumber(@val)) { padding: @val * 1px; }
单位转换用 unit()：when (unit(@n, px) > 14px)
未声明变量参与比较（如 @mode 没初始化）会让守卫彻底失效，建议顶层统一设默认值：@mode: "default";