SCSS无法直接用变量拼接mask-image，因编译时插值易破坏url()或gradient语法结构，导致解析错误或降级为空遮罩；应采用预设map+mixin生成静态类，或仅在Chromium中用@property实现有限动画。
SCSS 本身不支持直接生成 mask 或 mask-image 的动态值（比如用变量拼接 URL 或渐变），但可以通过函数 + 自定义属性（@property）或预设 map 配合 mixin 实现「参数化遮罩」的可控输出——前提是目标浏览器支持 @property（Chrome/Edge/Opera，Firefox 尚未支持）。纯 CSS 遮罩层若需动态控制，必须绕开 runtime 计算，改用编译期可确定的方案。
为什么不能直接用 SCSS 变量拼接 mask-image
因为 mask-image 的值是 <image> 类型，而 SCSS 在编译时无法把变量安全注入到 url() 或 linear-gradient() 函数内部（会破坏语法结构或导致引号嵌套错误）。常见报错如：
Invalid CSS after "...-image: url(#{$": expected ")", was "$mask-id});"
- SCSS 的
#{$var}插值在url()内部极易触发解析失败，尤其当变量含括号、逗号或空格时 -
mask-image: linear-gradient(...)中插值颜色或角度，同样因单位缺失或分隔符混乱导致编译中断 - 即使编译成功，CSS 运行时也无法识别插值后的字符串为合法
<image>，最终降级为空遮罩
@mixin mask-with-config：用 map 预设遮罩配置并生成类名
把常用遮罩类型（如圆角剪裁、中心镂空、顶部渐隐）抽象成 key-value map，在编译期生成对应 class，避免运行时计算。例如：
$mask-presets: (
"circle": (
"type": "radial-gradient",
"args": "circle at 50% 50%, #000 0%, transparent 70%"
),
"fade-top": (
"type": "linear-gradient",
"args": "to bottom, transparent 0%, #000 40%"
)
);
- 每个 preset 的
"args"必须是完整、可直接塞进mask-image的字符串，不含变量插值 - mixin 内用
@each遍历 map，生成.mask--circle { mask-image: radial-gradient(circle at 50% 50%, #000 0%, transparent 70%); } - 调用时写
@include mask-with-config($mask-presets);，不传参、不拼接，杜绝语法风险
用 @property + mask-composite 实现运行时动画控制（仅 Chromium 系列）
如果真需要鼠标悬停时动态改变遮罩透明度或位置，且只兼容现代 Chromium 浏览器，可结合 @property 和 mask-composite 做有限动画：
立即学习“前端免费学习笔记（深入）”；
@property --mask-alpha {
syntax: "<number>";
inherits: false;
initial-value: 1;
}
然后在元素上写：
.card {
mask-image: linear-gradient(to bottom, rgba(0,0,0,var(--mask-alpha)) 0%, transparent 100%);
transition: --mask-alpha 0.3s;
}
.card:hover {
--mask-alpha: 0.3;
}
-
@property必须声明syntax为<number>或<color>，否则无法被transition驱动 -
mask-composite: add | subtract | intersect可组合多个遮罩层，但各层仍需静态定义，不能靠 SCSS 动态生成新层 - Firefox/Safari 不支持
@property作用于mask-image相关属性，此方案无跨浏览器意义
真正能落地的「动态」，其实是编译期的「多配置复用」——别试图让 SCSS 在运行时造遮罩，而是用 map 定义好所有可能组合，让开发者选 class；想做交互动画，优先考虑 opacity 或 transform 配合固定遮罩层，而非硬刚 mask-image 的动态性。
