transform+\_: 是Less中用于累积拼接transform值的语法，以空格连接多个变换函数生成单条合法CSS声明，避免层叠覆盖。
什么是 transform+_: 语法
Less 的 transform+_: 不是函数，也不是新属性，而是“合并式追加”语法：它让多次调用的 transform 值以空格拼接，最终生成单条合法 CSS transform 声明。和普通 mixin 调用不同，它不覆盖、不替换，只累积。
关键点在于：+_: 中的下划线（_）明确表示空格分隔；若用 +: （无下划线），则会按逗号分隔——那对 transform 是非法的，浏览器直接忽略整条声明。
- ✅ 正确：
transform+_: scale(1.2);+transform+_: rotateZ(45deg);→transform: scale(1.2) rotateZ(45deg); - ❌ 错误：
transform+: scale(1.2);+transform+: rotateZ(45deg);→transform: scale(1.2), rotateZ(45deg);（语法错误）
为什么不能只靠普通 mixin 拼接 transform
普通带参 mixin（如 .transform(@t) { transform: @t; }）每次调用都会输出完整 transform: 行，后声明的会覆盖前声明的——CSS 层叠规则决定了只有最后一个生效。
而 transform+_: 绕过了层叠，由 Less 编译器在编译期把多个值拼成一个字符串。它本质是语法糖，但解决的是真实痛点：复合变换必须写在一行，且顺序敏感（scale 在前、rotate 在后，和反过来效果不同）。
- 普通 mixin 多次调用 → 多个
transform:声明 → 浏览器只认最后一个 -
transform+_:多次调用 → 单个transform:声明，含多个函数 → 浏览器按顺序执行 - 注意：它不校验函数合法性，
transform+_: invalid();也会照常拼进去，运行时才报错
常见踩坑：3D 变换合并后仍不生效
即使 transform+_: 正确拼出了 rotateX(30deg) translateZ(100px)，3D 效果仍可能塌陷为 2D——这不是 Less 的问题，而是缺少配套渲染上下文。
- 父容器必须有
transform-style: preserve-3d;，否则子元素的 3D 位置被压平 - 更外层（通常是祖先节点）需设置
perspective: 800px;，否则没有景深感，看起来像纯旋转 - 这两条 CSS 必须手动写，
transform+_:不会、也不能自动注入它们 - 建议封装成组合 mixin：
.transform-3d(@rotate-x, @t-z) { transform+_: rotateX(@rotate-x) translateZ(@t-z); }，但调用处仍要同步确保父级有preserve-3d和perspective
合并顺序与性能影响
transform+_: 的拼接顺序严格按 Less 源码中调用的先后顺序，不是按选择器权重或文件导入顺序。这点容易被忽略。
- 如果在嵌套块里多次调用：
&__item { transform+_: scale(0.9); } &__item:hover { transform+_: scale(1.1); }，hover 状态会同时包含两个值 →scale(0.9) scale(1.1)，后者覆盖前者，实际只生效 scale(1.1) - 动画中慎用：CSS 动画过渡的是整个
transform字符串，若拼接项动态增减（比如通过条件 mixin），会导致浏览器反复重排重绘，比固定字符串性能差 - 调试时直接看编译后 CSS 最可靠；搜索
transform:行，确认是否真为单行、空格分隔、无逗号
真正难处理的不是语法写错，而是把 transform+_: 当成万能胶——它只管拼字符串，不管渲染逻辑、不补前缀、不校验单位、也不感知父级缺失的 perspective。写完记得手动检查这三样：拼出的值是否合法、父容器是否有 preserve-3d、外层是否有 perspective。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
