Less v4.x 已彻底移除 + 和 +_ 合并语法，transform+: rotate(10deg) 会直接报 ParseError: Unexpected token '+'；应改用空格分隔的 list（如 @tf: rotate(10deg) scale(1.2)）并赋值给 transform。
Less 的 + 和 + _ 合并语法在 v4.x 中已完全移除，直接使用会报 ParseError: Unexpected token '+' —— 不是配置问题，是语法被删了。
为什么 transform+: rotate(10deg) 现在会报错
Less 从 v3.5.0 起废弃 + / + _，v4.x 彻底不支持。你看到的旧教程或遗留代码里类似：
.btn { transform+: rotate(10deg); transform+: scale(1.2); }
这类写法在当前稳定版（如 Less 4.2+）中直接编译失败。错误不是“没生效”，而是根本无法解析。
-
transform+不再是合法语法，连带box-shadow+、animation+全部失效 - 即使降级到 v3.8.x，
+ _对transform的空格拼接也极易出错：漏单位（rotate(45)）、顺序错乱、混用 2D/3D 函数却无上下文 - 浏览器对
transform值极其敏感——一个空格、少个deg、Z 轴坐标系缺失，整条声明就被静默丢弃
用 mixin + list + join() 安全构造多重 transform
替代方案不是“模拟 merge”，而是显式控制拼接逻辑。核心是：把变换函数存为 list，再用 join() 输出逗号分隔的合法值（注意：transform 本身要求空格分隔，但 join(', ', ...) 是错的；必须用空格连接，且不能多加逗号）。
立即学习“前端免费学习笔记（深入）”；
- 正确做法是用
make-list()或手动构造 space-separated list，例如：@tf: rotate(10deg) scale(1.2) translateX(8px) - 然后直接写
transform: @tf;—— Less 会原样输出空格分隔字符串，这是浏览器可识别的合法格式 - 若需动态追加，用
append()（v3.8+ 支持），但必须初始化：@tf: [];→@tf: append(@tf, rotate(10deg), space); - 避免用
e()拼接字符串，会丢失类型检查，rotate(@deg)若@deg未定义，编译不报错，但输出rotate()导致 CSS 失效
必须配套设置的上下文属性
只拼对 transform 值远远不够。浏览器执行时依赖三个关键上下文，缺一不可：
-
transform-origin必须显式声明，不能依赖默认值。比如卡片翻转要transform-origin: center，否则绕左上角转 - 含
rotateX/rotateY/translateZ时，父容器必须有perspective（非子元素自身），否则 Z 轴无效 - 3D 变换链中，直接父容器需设
transform-style: preserve-3d，否则子元素 Z 轴塌陷成平面 - 这些都不能塞进同一个 mixin 当参数“顺带处理”——它们作用域不同、生效时机不同，必须分层写死或按需注入
最容易被忽略的陷阱：嵌套规则里的 transform 顺序
Less 嵌套本身不改变 CSS 输出顺序，但开发者常误以为嵌套层级 = 执行顺序。例如：
.card { transform: rotateY(10deg); &:hover { transform: scale(1.1); } }
结果是 hover 时完全覆盖原值，不是叠加。真正叠加必须写在同一声明里：
.card { transform: rotateY(10deg); &:hover { transform: rotateY(10deg) scale(1.1); } }
或者用 mixin 封装：
.tf(@base, @hover...) { transform: @base; &:hover { transform: @base @hover; } }
但注意：@hover 必须是 space-separated list，且所有函数单位、括号、空格必须合法——这里没有自动校验，错一个就白写。
