根本原因是Less v4+彻底移除transform+等+合并语法，旧写法如transform+: rotate(10deg)会直接触发ParseError中断编译，导致后续所有CSS规则被丢弃；正确做法是用空格分隔的list（如@tf: rotate(10deg) scale(1.2)）并赋值给transform。
Less 编译后部分 CSS 属性被意外合并丢弃，根本原因不是编译器“优化”了代码，而是你用了已移除的 + 和 + _ 合并语法，或在 transform 等多值属性上误用空格拼接逻辑，导致解析失败、静默跳过整条声明。
Less v4+ 彻底废弃 transform+ 语法，报错即中断编译
旧写法如 .btn { transform+: rotate(10deg); transform+: scale(1.2); } 在 Less 4.0+ 中直接触发 ParseError: Unexpected token '+'——这不是警告，是编译终止。后续所有规则（包括同文件里它下面的 color、margin）都不会进入输出。
- 降级到 v3.8.x 也极不可靠：
+对transform的空格拼接无语义校验，漏单位（rotate(45)）、混用 2D/3D 函数（rotateX(30deg) translateZ(10px)）都可能产出非法值，浏览器静默丢弃整条transform - 别试图用
e()拼字符串绕过：比如transform: e("rotate(@{deg}) scale(1.2)");，一旦@deg未定义，输出就是transform: rotate() scale(1.2);，CSS 无效且不报错 - 检查构建日志：如果编译没报错但样式缺失，大概率是某处
@import因语法错误被静默丢弃（见知识库中Unrecognised input场景），而非当前文件问题
用 list + 空格分隔替代 +，但必须显式控制上下文
合法写法是把变换函数存为 space-separated list，再直接赋给 transform：
@tf: rotate(10deg) scale(1.2) translateX(8px);
.btn {
transform: @tf;
}
-
@tf必须初始化为 list（不能是空字符串或[]），否则append(@tf, ...)会失败；v3.8+ 支持@tf: append(@tf, rotate(10deg), space);，但首次调用前需@tf: []; - 仅拼对值不够：浏览器执行
transform依赖三个独立上下文——transform-origin（必须显式设，不能靠默认）、perspective（加在父容器，非自身）、transform-style: preserve-3d（防 Z 轴塌陷）。它们无法塞进同一个 mixin 参数里一并处理 - 嵌套规则中追加变换要格外小心：比如
.card:hover { .btn { transform+: rotateY(180deg); } }这种写法在 v4+ 直接报错，且即使 v3.8 允许，也极易因父级transform重置导致子级失效
其他属性（如 box-shadow、animation）同样不支持 + 合并
box-shadow+、animation+ 等写法在 v4+ 全部失效，表现和 transform+ 一致：要么编译报错，要么产出非法值被浏览器忽略。
立即学习“前端免费学习笔记（深入）”；
- 多层阴影应写成：
box-shadow: 0 2px 4px rgba(0,0,0,0.1), 0 4px 12px rgba(0,0,0,0.15);——逗号分隔，不是空格 - 动画链不要靠
animation+拼接，改用单个animation声明多个动画名：animation: fade-in 0.3s, slide-up 0.4s ease-out; - 所有带单位的值（
deg、px、ms）必须显式写出，rotate(@deg)中@deg: 45;会输出rotate(45)，浏览器不认
最常被忽略的是：你以为丢的是某个属性，实际是整条规则块因前置语法错误被跳过；检查点不是“为什么 transform 没了”，而是“这条规则上面有没有 +、@import (less) 或未闭合的括号”。
