@supports 必须写在 mixin 外层，因为它是 CSS 规则级容器，只能包裹完整的选择器规则，若嵌入 mixin 内部会生成无效 CSS 导致降级失效、iOS 白屏等问题。
直接用 @mixin glass 就行，但必须把 @supports 包裹整个规则块，不能只包声明；否则降级失效、iOS 旧版不认、Safari 真机白屏。
为什么 @supports 必须写在 mixin 外层？
SCSS 的 @mixin 编译后是 CSS 声明块，而 @supports 是 CSS 规则级容器，它只能包裹完整的选择器规则（selector + declarations），不能只包几条属性。如果把 @supports 写进 mixin 主体里：
- 编译后会生成无效 CSS（例如
.a { @supports (...) { backdrop-filter: ... } }），浏览器直接忽略整条规则 - iOS 15.4 之前只支持
-webkit-backdrop-filter，但若@supports没生效，连前缀版都不会应用 - IE / 老 Android 下本该退化为纯半透背景，结果因语法错误导致样式丢失
@mixin glass 的参数设计要点
实际封装时，别把 background 硬编码死——深色模式、主题切换、不同层级都需要灵活覆盖。推荐这样写：
- 主参数只暴露
$blur和$saturation，背景色由调用方传入或用默认占位符（如$bg: null） -
$saturation建议默认180%：单独blur()容易发灰，加饱和度能提通透感，但别超200%（部分 Android WebView 溢出变色） - 必须同时输出
-webkit-backdrop-filter和标准backdrop-filter，缺一不可 - 别漏
border-radius和border：纯靠模糊不够“玻璃感”，细边框+圆角是视觉锚点
调用时最容易踩的三个坑
写了 mixin 不等于效果就出来，常见失效链路：
立即学习“前端免费学习笔记（深入）”；
-
background没设透明度：写background: white或background-color: #fff→ 后面内容被完全遮住，backdrop-filter无源可滤 - 父容器有
overflow: hidden或clip-path→ 裁掉背后区域，模糊采样失败，iOS 上常出白边 - 背后没内容：比如模态框挂载在某个
z-index: 0的 wrapper 内，body 背景图根本穿不进来 → Safari DevTools 看似样式生效，真机就是灰块
性能敏感场景怎么收口？
backdrop-filter 触发 GPU 合成层，滚动/悬停中频繁重绘极易卡顿。生产环境建议：
- 模糊值别超
16px：iOS Safari 在20px以上开始明显掉帧 - 禁用
transition: backdrop-filter：浏览器不优化这个过渡，必卡；改用opacity或transform: translateZ(0)+will-change: opacity - 微信 X5 内核（旧版 Blink）直接不支持，得配降级方案：
background: rgba(255,255,255,0.15)+ 细边框，至少保结构
真正难的不是写对那几行 SCSS，而是确保背后有内容、父层不裁剪、设备真能跑起来——这些没法被编译器报错，只能靠真机连着 Performance 面板看帧率。
