结论：别写通用 mixin。sass 本身不识别浏览器能力，所谓“自动”只是按规则硬补，而 css3 属性前缀规则千差万别，用 @mixin prefix($prop, $value) 统一处理必然漏、错、冗余，如 transform 需 -ms-（ie10）、-webkit-（ios）等差异化前缀，无法泛化。
直接说结论：别写通用 mixin。
Sass 本身不识别浏览器能力，所谓“自动”只是按你写的规则硬补——而 CSS3 属性的前缀规则千差万别，靠一个 @mixin prefix($prop, $value) 统一处理，90% 的情况会漏、会错、会冗余。
为什么 @mixin prefix($prop, $value) 必然失效
这种写法在 2018 年资料里很常见，但今天已成典型反模式：
-
transform需要-ms-（IE10）、-webkit-（iOS -o- 和-moz-早就不需要了，硬加反而污染输出 -
filter完全不被autoprefixer处理，必须手动并列写-webkit-filter和filter，且顺序不能颠倒 -
backdrop-filter在 Safari 16.4+ 才去掉-webkit-，但旧版 iOS WebKit 仍强制要求前缀，通用 mixin 无法区分版本 - 传入
transition: all会触发 Safari 旧版重绘 bug，而@mixin不知道你是否真要用all
@mixin flex-center 这类固定场景 mixin 才靠谱
只封装明确、稳定、高频的组合，不接受参数，不试图“通用”：
- 它内部写死
display: -webkit-box; display: -ms-flexbox; display: flex;，因为居中布局对 IE10/Android 4.4/Safari 9–12 的兼容路径是确定的 - 不支持
@include flex-center($justify: center)—— 子属性如justify-content的前缀规则和display完全不同，混在一起就失控 - 如果项目已放弃 IE，就该删掉
-ms-flexbox行，而不是靠参数开关 —— mixin 不是配置中心
示例：
@mixin flex-center {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
}
真正该依赖的不是 mixin，而是 browserslist + autoprefixer
SCSS 编译时根本不知道你要支持哪些浏览器，它只管展开代码；而 autoprefixer 是 PostCSS 插件，在 CSS 输出后扫描标准属性，按 browserslist 配置决定加不加、加哪个前缀：
- 你在 SCSS 里写
display: flex;，autoprefixer自动补-webkit-box和-ms-flexbox（如果 browserslist 包含 iOS 9 或 IE11） - 你写了
-webkit-filter: blur(2px); filter: blur(2px);，autoprefixer会删掉-webkit-（如果 browserslist 不含 iOS - 错误示范：只配了 SCSS mixin，上线时没跑
autoprefixer—— iOS 14.5 Safari 直接白屏，因为没-webkit-clip-path
验证方式只有一个：看编译后的 CSS 文件里有没有多余前缀，而不是看你 SCSS 源码写了几个 -webkit-。
@mixin filter 必须手动拆解函数，不能透传字符串
filter 是少数 autoprefixer 完全不管的属性，但它的兼容性陷阱极深：
- iOS Safari 9–12 只认
-webkit-filter，且必须写在filter前面，否则新版 Chrome 可能跳过标准声明 - 传入
@include filter('blur(2px) contrast(1.2)')很危险 —— SCSS 插值会破坏空格和括号解析，X5 内核或老 IE 直接崩 - 安全做法：每个函数单独参数，用插值拼接：
-webkit-filter: blur(#{$blur}) contrast(#{$contrast}); filter: blur(#{$blur}) contrast(#{$contrast}); - 函数顺序影响渲染结果：先
grayscale()再brightness()和反过来，灰度后的亮度调节效果完全不同
真正的复杂点不在怎么写 mixin，而在你是否清楚每条属性在目标浏览器中的真实解析路径——这没法靠抽象函数解决，只能靠 browserslist 约束 + 输出验证。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
