scss @mixin 必须显式声明三类 autoprefixer 不处理的属性：ie10/11 的 display: -ms-flexbox 等 flex 专属前缀、safari 的 -webkit-backdrop-filter、以及 -webkit-line-clamp 及配套 display: -webkit-box 声明。
SCSS @mixin 不能替代 Autoprefixer，但对它不处理的场景（如 display: -ms-flexbox、-webkit-backdrop-filter、-webkit-line-clamp）必须手动硬编码，否则 IE10/11、iOS Safari 9–12 等关键旧环境直接失效。
哪些属性必须靠 @mixin 显式声明前缀
Autoprefixer 只补现代标准属性的厂商前缀（如 -webkit-justify-content），但对以下三类语法完全不处理，必须在 SCSS 中显式写出：
-
display: -ms-flexbox、-ms-flex-pack、-ms-flex-align—— IE10/11 专属，漏掉整块 Flex 容器不渲染 -
-webkit-backdrop-filter—— Safari 17.4 仍只认这个，标准backdrop-filter单独写无效 -
-webkit-line-clamp及配套的display: -webkit-box、-webkit-box-orient—— Firefox 完全不支持，也不能靠 Autoprefixer 补全
这些不是“可选前缀”，而是功能开关：没它们，对应浏览器压根不执行逻辑。
为什么不能写泛化参数型 @mixin vendor($prop, $val)
这类通用封装看似省事，实际极危险：
-
$prop: display会生成-webkit-display，这是非法 CSS，编译直接报错 -
flex-direction在-webkit-box下对应的是-webkit-box-orient，不是-webkit-flex-direction，参数无法自动映射 - 不同属性前缀组合完全不同：
transform只需-webkit-和-ms-，而flex需要三套（-webkit-box/-ms-flexbox/flex），无法统一规则
正确做法是按高频场景封装固定语义化 @mixin，比如 @mixin flex-row-center 内部硬编码三行 display 声明和对应的 justify-content / -ms-flex-pack / -webkit-box-pack。
@supports 必须和 @mixin 配合使用，不能只靠它
@supports (-webkit-line-clamp: 1) 是必要的检测手段，但它只是开关，不提供实现：
- 你得在
@supports块里调用@include flex-row-center或@include truncate-lines(2)，否则检测通过也没样式 - 不能把整个组件样式包进
@supports——一旦检测失败（如 Firefox），整块 CSS 丢失，降级逻辑就断了 - fallback（如
max-height+line-height截断）必须写在@supports外层，作为兜底；@supports内只放增强逻辑
也就是说：@supports 定范围，@mixin 提实现，二者缺一不可。
顺序、单位、容器约束这些细节决定成败
兼容性问题常出在“看起来写了，但顺序或值不对”：
-
display三声明顺序不能错：-webkit-box→-ms-flexbox→flex，否则 IE 跳过前两个直接用标准值（它不认） -
grayscale()数值单位必须区分：-webkit-filter: grayscale(1)（无单位浮点数） vsfilter: grayscale(100%)（百分比），传参时用#{$value}插值，且$value类型得是1或100%，不能是字符串"1" -
-webkit-line-clamp生效前提苛刻：父容器必须有明确width或max-width（不能是flex: 1且外层无约束），且不能与text-align: justify共用，否则省略号偏移
这些不是边缘 case，而是 iOS Safari、IE10、Android WebView 的真实解析规则——绕不开，只能严格遵循。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
