遮罩层通用结构为：.overlay 容器下分 .overlay__backdrop（背景）和 .overlay__content（内容），分离二者以独立控制 z-index 与 pointer-events；用 @mixin overlay 统一管理透明度、层级、过渡，避免 @extend 导致样式污染与 tree-shaking 失效；需精确设置 pointer-events 并动态控制 body 滚动状态。
遮罩层的通用样式结构怎么定
遮罩层（overlay）本质是覆盖在内容之上的半透明层，关键在于「不干扰底层交互」或「完全拦截交互」两种模式。Sass 里不该为每种场景写一套类名，而是用统一结构 + 可变参数控制行为。
推荐基础结构：.overlay 作为容器，.overlay__backdrop 负责背景遮罩，.overlay__content 放实际弹窗/提示内容。这样语义清晰，也方便后续用 @mixin 注入不同表现。
常见错误是直接给 .overlay 设 background: rgba(0,0,0,0.5)，结果导致内容区也被半透明覆盖——必须把 backdrop 和 content 分离，否则无法独立控制 z-index 和 pointer-events。
用 @mixin overlay 统一控制透明度、层级和过渡
真正需要复用的是「视觉行为」：比如点击遮罩关闭、淡入淡出、是否锁滚动。这些靠变量驱动比硬编码更可靠。
@mixin overlay($bg: rgba(0, 0, 0, 0.6), $z-index: 9999, $duration: 0.2s) 是最简够用的签名。其中：
-
$bg必须支持纯色、渐变、甚至transparent（用于仅做事件拦截无视觉遮罩） -
$z-index要预留足够空间，避免和第三方 UI 库冲突（比如 Ant Design 默认 1000，所以设 9999 更安全） -
$duration推荐用ease-in-out，生硬的linear在遮罩上特别显假
示例调用：
@include overlay(rgba(0, 0, 0, 0.4), 10000, 0.15s);
为什么不能只靠 @extend 复用遮罩样式
@extend 看似省事，但会把所有被继承的选择器塞进同一 CSS 规则里，造成两个问题：
- 多个组件共用同一个
.overlay类时，@extend会把它们的样式强行合并，一旦某个组件需要单独改z-index就得加!important - 构建工具（如 Webpack + sass-loader）对
@extend的 tree-shaking 支持差，未使用的扩展样式仍会打入最终 CSS
用 @mixin 则每个调用都生成独立规则，变量值内联展开，既可控又利于压缩。
遮罩层的 pointer-events 和滚动穿透怎么防
用户点遮罩关闭弹窗时，如果 .overlay__backdrop 没设 pointer-events: auto，点击会直接透到下层；而内容区默认继承，得显式关掉：
.overlay__backdrop { pointer-events: auto; }-
.overlay__content { pointer-events: auto; }（否则内部按钮点不了） - 遮罩激活时，
body加overflow: hidden防滚动穿透，但别用position: fixed—— 它会导致页面重排，且 iOS Safari 有兼容问题
更稳妥的做法是记录激活前 document.body.style.overflow 值，关闭时还原，而不是简单切 hidden/auto。
遮罩层看着简单，但透明度叠加、z-index 层级、pointer-events 传递、滚动状态同步这四点，任意一个没对齐就会在特定设备或嵌套场景下失效。Mixin 只是封装手段，关键还是理解每一行 CSS 在 DOM 树里的实际作用位置。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
