SCSS无法为mask属性自动加浏览器前缀，因Autoprefixer不支持该属性；必须手动书写-webkit-mask并置于标准mask之前，且Firefox至今完全不支持mask。
SCSS 本身无法为 mask 属性加浏览器前缀，因为 Autoprefixer 不支持该属性，且现代浏览器对 mask 的支持极不统一——你必须手动声明 -webkit-mask，并放弃非 WebKit 内核的兼容性。
为什么 Autoprefixer 对 mask 完全无效
Autoprefixer 的前缀规则库（基于 Can I Use）明确不覆盖 mask 及其子属性（如 mask-image、mask-composite）。它只处理已标准化、多浏览器有明确前缀映射的属性（如 flex、transform）。mask 在 Firefox 中长期无支持，在 Safari 中仅部分支持且强制要求 -webkit- 前缀，Chrome/Edge 虽支持无前缀版本，但实际渲染行为仍依赖 -webkit- 补全。Autoprefixer 不会“猜”这种碎片化场景，直接跳过。
- 执行
npx autoprefixer --info查看支持列表，mask不在其中 - 即使你在
browserslist中写"Safari >= 15.4"，Autoprefixer 也不会生成-webkit-mask - 试图在 SCSS 中写
@include mask($img)并指望 Autoprefixer 补前缀，结果只会输出无前缀的 CSS，在 Safari 中完全失效
mask 必须手动写 -webkit-mask，且顺序不能错
所有实际生效的 mask 样式，都得显式写出 -webkit-mask，再跟标准属性。浏览器按顺序解析，遇到不认识的 mask 就跳过，但认得 -webkit-mask 就执行。
- 正确写法：
-webkit-mask: url(#mask-svg) no-repeat center; mask: url(#mask-svg) no-repeat center;
- 错误写法：
mask: url(#mask-svg);—— Safari 16+ 会忽略整条声明 - 错误顺序：
mask: ...; -webkit-mask: ...;—— 某些旧版 Safari（如 15.6）可能因解析优先级问题漏掉 - 不要尝试用
@mixin vendor(mask, $val)动态拼接，-webkit-mask是固定前缀，不是可推导的厂商映射
SCSS 中安全封装 mask 的唯一方式：固定结构 + 显式前缀
你可以用 @mixin 封装常用组合，但必须把 -webkit- 和标准属性都硬编码进去，不接受任意参数，不拼字符串，不依赖插值。
立即学习“前端免费学习笔记（深入）”；
- 推荐写法：
@mixin mask-image($url) { -webkit-mask-image: url(#{$url}); mask-image: url(#{$url}); } @include mask-image('/assets/mask.svg'); - 禁止写法：
@mixin mask($prop, $val) { -webkit-#{$prop}: $val; #{$prop}: $val; }——$prop是mask-image时，-webkit-mask-image合法；但传mask-size时，-webkit-mask-size实际未被 Safari 支持，反而污染 CSS - 渐变遮罩同理：
-webkit-mask-image: linear-gradient(...);必须完整写出，不能靠 SCSS 插值拼接括号和逗号 - 如果要用变量控制颜色或位置，改用 CSS 自定义属性：
mask-image: paint(mask-fade);配合@property（仅 Chromium），而非 SCSS 变量
Firefox 用户怎么办？别抱幻想
截至 2026 年 9 月，Firefox 仍不支持 mask 任何变体（包括 -webkit-mask）。MDN 明确标记为 “No support”。这意味着：
- 写
-webkit-mask不是为了“渐进增强”，而是“仅限 WebKit”的事实标准 - 若项目必须兼容 Firefox，只能降级为
clip-path或 SVG<mask>元素，二者行为与mask不等价 - 不要在 SCSS 中用
@if判断浏览器生成不同代码——构建时无法知道运行时 UA，且 CSS 不支持条件编译
最常被忽略的一点：mask 的 fallback 不是加前缀，而是换方案。你花一小时调 mask-image 的 SCSS 插值，不如花十分钟确认设计是否能用 clip-path: inset() 替代。
