translateX/translateY 必须用 transform 而非 left/top，因后者触发重排、CPU 压力大，前者走 GPU 渲染管线、不触发布局；Sass 封装需硬编码 -webkit-/-ms-/标准前缀，合并多维平移为单条 transform 声明，并谨慎使用 will-change。
为什么 translateX/translateY 必须用 transform 而不是 left/top
直接改 left 或 top 会触发浏览器重排（reflow），每次动画帧都要重新计算布局，CPU 压力大、掉帧明显。而 transform: translateX(10px) 只影响合成层位置，走 GPU 渲染管线，不触发布局和绘制。Sass 封装时若漏掉 transform 前缀或写成 left，等于放弃硬件加速。
如何正确声明前缀并保证 Safari/IE 兼容
Autoprefixer 不会补全 -webkit-transform 或 -ms-transform，尤其当目标环境含 iOS 14.5、IE 10 或 Android 4.4 时，仅靠它会白屏或失效。必须在 mixin 内硬编码前缀，且顺序固定为 -webkit- → -ms- → 标准属性。
-
@mixin translate-x($x)应输出：-webkit-transform: translateX(#{$x}); -ms-transform: translateX(#{$x}); transform: translateX(#{$x}); - 不要用
@if动态拼属性名，Sass 4.0+ 会报错：Invalid CSS after "form: #{'translateX'}": expected ")", was "(#{$x})" - 避免混用单位：传
10px就别同时接受1rem，单位不一致会导致编译后样式错乱
组合多个平移时怎么避免覆盖
Sass 是文本替换，连续调用 @include translate-x(10px) 和 @include translate-y(-5px) 会生成两条独立的 transform 声明，后者完全覆盖前者。必须合并为单条 transform: translate(10px, -5px)。
- 拆出
@mixin translate($x, $y: 0)处理二维平移，内部统一输出单条声明 - 若需单独控制 X/Y 轴又想组合，用 map 参数：
@mixin translate-map($props: ("x": 10px, "y": -5px))，再循环拼接值 - 慎用
translateZ(0)：现代浏览器已自动优化，强行加反而增加图层开销，仅在明确卡顿且确认是图层未提升时才加
移动端滚动中平移抖动怎么压住
iOS Safari 滚动时，transform 若没配 will-change: transform，可能因图层未预提升导致首帧卡顿。但 will-change 不能滥用——它会常驻图层，吃显存。
立即学习“前端免费学习笔记（深入）”；
- 在动画触发前 1 帧动态加：
&.is-animating { will-change: transform; }，动画结束立即移除 class - 不要在 mixin 里默认写
will-change，它不属于样式逻辑，而是运行时提示 - 对列表项做 stagger 平移时，用
transform: translateX(calc(var(--offset) * #{$index}))配合 CSS 自定义属性，比 Sass 循环生成更灵活
真正难的不是写出 @mixin translate-x，而是调用时意识到：它必须和 transform 其他值共存、不能被覆盖、前缀不能少、will-change 不能常驻——这些约束不在编译期报错，只在真机上掉帧时才暴露。
