transform mixin 必须显式声明所有前缀，顺序为-webkit-→-ms-→标准属性；rotate/translate/scale 应拆分为独立 mixin；组合多个变换时需合并为单条 transform 声明，避免覆盖；慎用 translatez(0)，仅在明确性能瓶颈时单独调用。
transform mixin 必须显式声明所有前缀，不能只靠 autoprefixer 补全
autoprefixer 只处理标准属性（如 transform），不会回填 -webkit-transform 或 -ms-transform 这类旧前缀——尤其当你的 browserslist 配置里包含 iOS 14.5、IE 10 或 Android 4.4 这类仍需手动前缀的环境时，仅靠 autoprefixer 会漏掉关键声明，导致 Safari 旧版白屏或 IE 10 完全不生效。
正确做法是：在 mixin 内部硬编码常用前缀组合，且顺序必须是 -webkit- → -ms- → 标准属性。Sass 不做运行时检测，所谓“自动”只是你按目标浏览器列表预设的兜底逻辑。
-
@mixin rotate($deg)必须写成：-webkit-transform: rotate(#{$deg}); -ms-transform: rotate(#{$deg}); transform: rotate(#{$deg}); - 不要试图用
@if $prop == 'rotate'动态拼接属性名，Sass 4.0+ 会报错：Invalid CSS after "...form: #{'rotate'}": expected ")", was "(#{$deg})" - 如果只封装单个变换（如仅
rotate），就别塞进transform这个总属性里——避免和后续scale、translate调用冲突，覆盖掉前面的值
平移/旋转/缩放应拆成独立 mixin，而非一个万能 transform($val)
把所有变换塞进一个 @mixin transform($val) 看似灵活，实则破坏可维护性：调用时得记清字符串格式（rotate(45deg) scale(1.2)），编译后无法被 autoprefixer 识别，也无法做单位校验，更没法单独覆盖某一项（比如想让 translateX 在移动端降级为 margin-left）。
更稳妥的方式是按原子操作拆分，每个 mixin 只负责一类语义明确的变换：
-
@mixin translate($x, $y: 0)：生成transform: translate(#{$x}, #{$y})+ 所有前缀 -
@mixin rotate($deg)：只处理角度，不接受rad或grad单位混用 -
@mixin scale($factor)：默认scale(#{$factor})，若需scaleX/scaleY则另写@mixin scale-x($factor)
这样调用清晰：@include translate(10px, -5px); @include rotate(-15deg);，CSS 输出也干净，方便调试和 patch。
组合多个 transform 时，必须用单个 transform 声明，不能多次叠加
Sass mixin 展开是文本替换，如果分别 @include translate(...) 和 @include rotate(...)，会生成多条 transform 声明，后写的会完全覆盖前写的（浏览器只认最后一条），结果只有旋转生效，平移丢失。
解决方案有两个：
- 写一个组合 mixin：
@mixin transform-combo($t: (), $r: null, $s: null)，内部用transform: #{...}拼出完整值，例如transform: translate(10px, -5px) rotate(-15deg) scale(1.1) - 更推荐手动组合：在调用点统一写
transform: translate(...) rotate(...) scale(...)，把 mixin 当作“值生成器”，比如translate(10px, -5px)返回字符串translate(10px, -5px)，再由你拼进transform声明中
注意：Sass 的 unquote() 在这里危险——#{unquote('translate(10px, -5px)')} 可能在新版 Sass 编译失败；稳妥写法是直接用插值：transform: #{$t} #{$r} #{$s};，前提是传入的变量已是合法字符串。
慎用 transform: translateZ(0) 强制 GPU 加速
很多教程建议加 translateZ(0) 触发硬件加速，但实际场景中它可能引发新问题：iOS Safari 15.4 以下版本在 position: fixed 容器内使用时会导致滚动卡顿；Android Chrome 80+ 对 translateZ 的渲染路径已优化，强制添加反而增加图层合成开销。
如果你真需要该行为，别把它塞进通用 transform mixin 里，而是单独封装：
-
@mixin gpu-accelerate：只输出-webkit-transform: translateZ(0); transform: translateZ(0); - 仅在明确测出性能瓶颈的组件中调用，比如长列表滚动区域或高频动画容器
- 避免和
translate、scale等 mixin 混用——translateZ(0)必须和其他transform值合并为一条声明，否则会被覆盖
真正影响性能的是 layout 触发条件（如改 width、height、left），不是要不要加 Z。盯着 transform 本身做文章，容易忽略更根本的重排重绘源头。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
