@mixin flex-center 专用于居中，固定写 display: -webkit-box; display: -ms-flexbox; display: flex；@mixin transition($prop, $dur, $easing: ease) 仅支持单属性过渡，不支持 all；transform 等需按顺序前置带前缀声明、后置标准声明。
怎么用 @mixin 写一个自动加前缀的 CSS 属性封装
直接写 @mixin，别套壳、别抽象成“工具库”，先解决最常写的 transform、transition、flex 这几类。Sass 本身不解析浏览器能力，所谓“自动”其实是按你预设的浏览器列表硬补前缀——所以得先配好 target。
常见错误是把 @mixin 写成万能函数，比如传个属性名和值就试图生成所有前缀，结果 border-radius 加了 -webkit-，display: flex 却漏了 -ms-（IE10）。这不可靠，不如按场景分组写。
-
@mixin flex-center：专用于居中，内部固定写display: -webkit-box; display: -ms-flexbox; display: flex;，不接受参数，避免误用 -
@mixin transition($prop, $dur, $easing: ease)：只处理transition，明确支持$prop是单属性（如opacity），不支持all—— 因为-webkit-transition: all在 Safari 旧版有重绘 bug - 别在 mixin 里调用
unquote()或拼字符串，Sass 4.0+ 对属性名校验变严，#{'transform'}可能编译失败
Sass 的 autoprefixer 替代方案到底靠不靠谱
很多人以为写了 @mixin 就不用 autoprefixer 了，其实反了：@mixin 是手动兜底，autoprefixer 才是主流程。Sass 编译时根本不知道你最终要兼容哪些浏览器，它只管把 @mixin 展开；而 autoprefixer 是 PostCSS 插件，在 CSS 输出后扫描标准属性，按 browserslist 配置补前缀。
典型踩坑：开发时只用 Sass mixin，上线后没接 autoprefixer，结果 Chrome 110+ 里 clip-path 没前缀也能跑，但 iOS 14.5 的 Safari 仍需要 -webkit-clip-path，直接白屏。
立即学习“前端免费学习笔记（深入）”；
- 必须保留
browserslist配置（如"> 1%", "iOS >= 14.5"），autoprefixer依赖它判断是否加前缀 - Sass mixin 和
autoprefixer不冲突，但优先级不同：mixin 是“强制写死”，autoprefixer 是“按需添加”，后者覆盖前者（比如你 mixin 里写了-moz-transform，但browserslist里没 Firefox，autoprefixer 会删掉它） - 验证方式很简单：编译后看输出 CSS 里有没有多余前缀，而不是看 Sass 源码里写了几个
-webkit-
IE10/11 的 flex 前缀怎么写才不翻车
不是所有 flex 相关属性都能靠加前缀兼容。IE10–11 支持 -ms-flexbox，但语法和现代 flex 完全不同：没有 gap，align-items 对应 -ms-flex-align，justify-content 对应 -ms-flex-pack，而且 flex-wrap 根本不支持。
直接套用 @mixin flex-row 并补 -ms- 前缀大概率出问题。比如 flex: 1 在 IE 中必须拆成 -ms-flex: 1; flex: 1，否则 IE 忽略整条声明。
- 对容器：用
@mixin flex-container显式写出三套声明：display: -webkit-box/display: -ms-flexbox/display: flex，并配套-ms-flex-direction替代flex-direction - 对子项：避免用
align-self，IE 不支持；改用容器的-ms-flex-item-align统一控制 - 别指望
autoprefixer处理flex的 IE 语法转换——它只加前缀，不改属性名。这部分必须手写 mixin 或用postcss-flexbugs-fixes
为什么 @include 后属性顺序会影响渲染
CSS 层叠规则决定了：同样选择器下，后声明的属性会覆盖先声明的。而 Sass @include 是文本展开，顺序由你在样式块里写的顺序决定。如果两个 mixin 都设置了 transform，后 include 的那个生效。
更隐蔽的问题是：某些前缀属性在旧浏览器里会被忽略，但占位。比如 -webkit-transform: scale(0.9); transform: scale(1);，Safari 5.1 会执行前者，Chrome 60+ 会执行后者；但如果写反了，旧版 Safari 就啥也不干。
- 所有带前缀的属性，必须把带前缀的写在前面，标准属性写在最后——这是浏览器解析规则，不是 Sass 规则
- 别在一个 selector 里混用多个
@include来设置同一属性（比如一个 mixin 设transform，另一个设transition），容易错序；合并到一个 mixin 里统一控制顺序 - 用
/* autoprefixer ignore next */注释可临时禁用某行 autoprefixer，但仅限调试，上线前删掉——因为 ignore 会跳过整个声明，包括你手写的前缀
前缀不是装饰，是给特定引擎看的指令。写的时候得想清楚：这条声明最终会在哪个浏览器里执行，它的解析器认不认这个前缀，以及后面有没有更权威的声明把它盖掉。
