less 不支持运行时逻辑运算符，and/not 仅用于 mixin guard 编译期分支；必须搭配 when 使用，不可用于普通规则或 css 选择器；严格类型匹配，无 @if 等语法。
Less 本身不支持 and、not 这类逻辑运算符用于 CSS 规则的条件筛选——它不是编程语言，没有运行时布尔判断能力，也没有类似 JavaScript 的条件渲染机制。
Less 的“条件”实际是 mixin + guard 实现的编译期分支
你看到的 when、and、not 都只在 Less 编译阶段起作用，用于控制 mixin 是否被展开，不能动态响应 DOM 状态或媒体查询以外的运行时条件。
-
and只能出现在.mixin() when (condition1) and (condition2)中，且必须和when搭配使用 -
not同理，仅用于 guard 表达式，如when not (@color = red) - 这些判断在 CSS 输出前就已完成，最终生成的 CSS 里完全看不到
and或not - 不支持嵌套在选择器、属性值或伪类中直接写逻辑表达式（比如
div:not(.a and .b) {}是无效的）
正确写法：用 guard + and 实现多条件 mixin 分支
常见场景是根据多个变量组合输出不同样式，例如按钮主题 + 尺寸 + 状态：
.btn(@theme: default; @size: medium; @disabled: false) when (@theme = primary) and (@size = large) and not (@disabled) {
background-color: #007bff;
padding: 12px 24px;
}
.btn(@theme; @size; @disabled) when (@theme = secondary) and (@size = small) {
background-color: #6c757d;
padding: 6px 12px;
}
// 调用
.my-btn { .btn(primary; large; false); }
注意：and 左右必须有空格，not 后必须跟括号包裹的完整表达式；否则编译报错 ParseError: expected ')' got ' '。
别把 CSS 选择器逻辑和 Less guard 混为一谈
CSS 原生的 :not()、:is()、:where() 是浏览器运行时解析的选择器，和 Less 的 not guard 完全无关。下面这些写法容易出错：
- ❌
div when (@debug) and (@env = prod) { color: red; }——when只能用于 mixin，不能修饰普通规则集 - ❌
.card:not(.hidden and .collapsed) {}—— CSS 不支持and在:not()内部，应写成:not(.hidden):not(.collapsed) - ❌
@if (@x > 0) { ... }—— Less 没有@if，这是 Sass 语法
真正容易被忽略的是：guard 中的变量比较默认是严格相等（=），字符串要加引号，数字和单位不能混用——比如 @width: 100px 和 when (@width = 100) 永远不匹配，因为类型不同。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
