@mixin无法自动处理浏览器兼容性，因scss编译器不查browserslist或can i use，仅机械展开字符串；真正有效的是postcss+autoprefixer在编译后css上动态加删前缀，配合手动mixin兜底特殊场景如backdrop-filter或ie10 flex。
别指望 @mixin 自动处理浏览器兼容性——它不查 browserslist，也不懂 Can I Use，只机械展开你写的字符串。真正起作用的是 PostCSS + Autoprefixer，在 Sass 编译后的 CSS 上运行。
为什么 @mixin prefix($prop, $value) 必然失效
SCSS 编译器不会判断 transform 需要 -webkit- 但不需要 -moz-，也不会知道 display: flex 必须按 -webkit-box → -ms-flexbox → flex 顺序写，更不会跳过已废弃的 -moz-transform。你写 @include prefix(display, flex)，它就硬塞 -webkit-display: flex，结果直接编译报错。
-
display属性根本不能加-webkit-前缀，浏览器会忽略甚至报错 -
backdrop-filter在 Safari 17.4 仍只认-webkit-backdrop-filter，但@mixin prefix()不知道这个“必须带前缀才生效”的特例 -
transition: all在旧 Safari 有重绘 bug，但 mixin 无法根据传入值做条件判断
哪些场景才值得写 @mixin
只封装明确、稳定、高频、属性名和值都固定的组合，不接受参数，不拼字符串。
-
@mixin flex-center：固定写display: -webkit-box; display: -ms-flexbox; display: flex;，以及对应的老属性如-webkit-box-pack: center -
@mixin backdrop-filter($value)：只输出两行-webkit-backdrop-filter: $value;和backdrop-filter: $value;，顺序不可颠倒 -
@mixin ie8-opacity($color, $alpha)：仅负责 IE6–IE8，用ie_hex_str()转色，zoom: 1触发 hasLayout，且只支持0.6（#99）、0.7（#CC）等安全 alpha 值
真正该依赖的构建链路：sass → css → postcss + autoprefixer
Autoprefixer 是 PostCSS 插件，扫描标准 CSS 属性（如 clip-path、gap），按 browserslist 配置动态加/删前缀。它能删掉你手写的 -moz-transform（如果配置不含 Firefox），也能补 iOS 14.5 所需的 -webkit-clip-path。
- 确保
package.json里有有效browserslist字段，例如："browserslist": ["> 1%", "iOS >= 14.5"] - Vite/Webpack 默认集成 Autoprefixer，但必须验证最终输出的 CSS 文件——不是看 SCSS 源码里写了几个
-webkit- - 别在 SCSS 里写
-webkit-filter然后指望 Autoprefixer “优化”，它只处理标准属性，遇到已有前缀默认跳过 - IE10/11 的
-ms-flexbox和旧 Android 的-webkit-box，Autoprefixer 完全不生成，必须手动写进 SCSS
最容易被忽略的兼容点
Gap 属性在 Android 4.4 及以下完全不支持，@supports (gap: 1rem) 也无效——这些老内核根本不识别 @supports。此时只能靠 @mixin flex-gap 手动模拟：给子元素设 margin，父容器设负 margin 抵消边缘空白，再用 @supports 关闭现代浏览器的冗余样式。这种兜底逻辑无法被 Autoprefixer 替代，必须由 mixin 显式控制。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
