Less中mask-image必须双写且顺序固定：-webkit-mask-image在前、mask-image在后，路径与编码须完全一致；Mixin仅支持显式传参封装，不支持变量拼接或运行时逻辑。
Less 本身不执行运行时逻辑，所谓“预编译优化遮罩图层”，本质是把 mask-image 的跨浏览器兼容写法、路径管理、尺寸控制等硬性约束，在编译期就固化成安全、可复用、不易出错的结构。靠 Autoprefixer 补前缀？不行；靠变量拼接 URL？也不行——这些都得手动写死。
为什么 mask-image 必须双写且顺序固定
WebKit 内核（Safari、旧版 Chrome）至今仍强依赖 -webkit-mask-image，即使标准属性已支持，它也不会 fallback 到后者。Autoprefixer 对该属性识别极弱，尤其在 Less 构建链中常直接跳过。
-
-webkit-mask-image必须写在mask-image前面，否则 Safari 会忽略标准属性（不是 bug，是渲染引擎策略） - 两个声明的值必须完全一致：同一路径、同一 data URL 编码格式、同一 SVG 内容，不能一个用相对路径、一个用
data:image/svg+xml;utf8,... - 若用内联 SVG，
url("data:image/svg+xml;utf8,<svg>...")</svg>中的双引号和utf8编码缺一不可，否则 Safari 直接静默丢弃
Less Mixin 封装 mask-image 的唯一可行写法
Less 不支持运行时字符串拼接再当 CSS 值使用，所以 mask-image: url(@src) 这类写法必然报错或编译为空。只能把路径或 SVG 内容作为参数显式传入，且不能做任何条件判断或默认值兜底——Mixins 在编译期展开，所有分支都固化。
- 图片路径封装：
.mask-url(@src) { -webkit-mask-image: url(@src); mask-image: url(@src); } - SVG 内联封装（注意转义）：
.mask-svg(@svg-content) { -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 100 100">@{svg-content}</svg>"); mask-image: url("data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 100 100">@{svg-content}</svg>"); } - 别试图用
whenguard 控制是否启用前缀——Less 编译器不会按 UA 或环境动态删代码，写了就全输出
遮罩“看不见”的三大隐藏前提，和 Less 无关但必须检查
即使 Less 编译出的 CSS 完全正确，遮罩仍可能失效。这些问题不在预处理器层面，但常被误认为是 Less 写错了：
立即学习“前端免费学习笔记（深入）”；
- 父容器没透出背景：如果遮罩元素外层是
body { background: white }，那遮罩裁剪的只是白底，结果就是一片灰，毫无层次感 -
overflow: hidden和border-radius同时存在：WebKit 渲染管线会放弃 mask 合成，退化为普通裁剪（这是限制，不是 bug） - 遮罩图尺寸与元素不匹配：没配
mask-size: cover或mask-position: center，导致遮罩偏移或拉伸失真
真正难的不是写对 Less，而是记住：所有路径、编码、尺寸、父级样式、渲染限制，都得在写 mixin 前就心里有数。Less 只负责把你知道的规则，干净地复制进最终 CSS —— 它不帮你查 Safari 的渲染限制，也不提醒你 PNG 漏了 Alpha 通道。
