Less中transform+\_:和box-shadow+:必须配对使用，需先声明基础值（如transform: translateZ(0)、box-shadow: none），否则后续叠加无效；语法上transform用空格分隔函数，box-shadow用逗号分隔多层阴影。
Less中transform+_: 和box-shadow+: 必须配对使用才有效
单独写transform+_: rotate(10deg)不会报错，但编译后可能被覆盖或丢弃——因为transform是单值属性，合并依赖前序定义存在。必须先有基础transform声明（哪怕为空），后续的+_: 才能追加。
常见错误现象：只在&:hover里写transform+_: translateY(-4px)，结果 hover 时没变化。原因就是父级没定义初始transform: none或transform: translateZ(0)，导致合并无基底可依。
- 正确做法是在基础类中显式初始化：
transform: translateZ(0);，再在混入中用transform+_:叠加 -
box-shadow+:同理，需先有box-shadow: none;或默认值，否则第二次+:可能被忽略 - 不要跨选择器合并：.card { box-shadow+: 0 2px 4px rgba(0,0,0,.1); } 和 .card:hover { box-shadow+: 0 8px 16px rgba(0,0,0,.15); } 是安全的；但若把后者写在另一个 class 里，编译顺序不确定，容易丢失
为什么transform+_: 用空格分隔而box-shadow+: 用逗号
CSS 规范决定的：transform 属性值本身就是空格分隔的函数序列（scale(1.1) rotate(5deg) translateX(2px)），所以+_: 自然沿用空格；box-shadow 支持多层阴影，每层之间用逗号分隔，因此+: 也对应逗号。
混淆后果很直接：若误用transform+: （带逗号），编译后变成transform: scale(1.1), rotate(5deg)，浏览器直接忽略整条声明；反过来，box-shadow+_: 会产出box-shadow: 0 2px 4px #000 0 8px 16px #000，语法非法，整行失效。
立即学习“前端免费学习笔记（深入）”；
- 记口诀：“transform 拼接靠空格，shadow 多层靠逗号”
- 所有
+_:操作都要求右侧值是合法的 CSS 函数或数值，不能带单位混用（如transform+_: scale(1.2) 10px非法） - Less 1.7+ 支持
@{var}+_:动态拼接，但变量必须提前解析为完整函数字符串，比如@rotate: ~"rotate(15deg)"; transform+_: @rotate;
合并变换时别漏掉transform-style: preserve-3d
当你用transform+_: rotateY(180deg) translateZ(50px)做翻转卡片，却只看到平面旋转——大概率是缺了transform-style: preserve-3d。这个属性不参与合并，必须单独、显式声明在父容器上。
它和perspective是配套开关：没有preserve-3d，子元素的 3D 变换会被压平到父容器平面；而perspective控制景深感，建议设在包裹容器（如.card-wrapper）上，值取800px~1200px较稳。
- 混入封装时，
transform+_:只管拼函数，transform-style和perspective必须由调用方手动加，不能塞进同一个 mixin - 移动端 Safari 对
preserve-3d支持不稳定，若发现翻转卡顿或消失，加backface-visibility: hidden到子元素能缓解 - 不要在
:hover里动态加transform-style——它不是可动画属性，只能初始设置
阴影与变换合并后，transition必须精简指定
合并后的box-shadow和transform都是可过渡属性，但一旦混入transition: all，就会拖垮性能。尤其在 iOS WebView 或旧版 Chrome 中，all会强制重排，导致悬停抖动甚至文字模糊。
真实项目里，你只该过渡这两项：transform和box-shadow。其他任何属性（opacity、color、background-color）都不该进队列。
- 写死过渡：
transition: transform 0.25s ease, box-shadow 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94); - 避免用
@arguments自动透传——它可能把border-color之类无关项也拖进来 - 进出场节奏不同：进入用快进缓出贝塞尔曲线，移出可不设，让浏览器自动反向；强行统一时长反而生硬
最易被忽略的是 z-index：合并提升效果后，若卡片被兄弟元素遮住，不是transform没生效，而是z-index没同步提升。务必在 hover 状态下显式写z-index: 10，且确保父容器不是position: static。
