结论：用sass mixin封装图片裁剪mask逻辑时，应通过$mask-url参数传入路径，同时输出-webkit-mask-image和mask-image，并将mask-mode、mask-size等设为可选参数，默认unset，避免写死导致复用性崩塌。
怎么用Sass Mixin封装图片裁剪的mask逻辑
直接说结论：别用mask-image写死路径，用Mixin传参生成带url()的遮罩规则，同时兼容WebKit前缀和现代语法。Sass本身不执行CSS，只是帮你把重复的遮罩声明变成可复用、可配置的代码块。
常见错误是把图片路径硬编码进Mixin里，导致每次换图都要改Mixin定义；或者忘了加-webkit-mask-image，结果在Safari里完全不生效。
- 用
$mask-url参数接收图片路径，保持调用时灵活 - 必须同时输出
-webkit-mask-image和mask-image，Safari 15.4+才开始支持无前缀版本 - 遮罩图建议用SVG（尺寸小、缩放无损），避免PNG在高DPI屏上模糊
- 如果遮罩图带透明度，注意
mask-mode默认是luminance，想用Alpha通道得显式写mask-mode: alpha
@mixin img-mask($mask-url, $mode: luminance) {
-webkit-mask-image: url(#{$mask-url});
mask-image: url(#{$mask-url});
-webkit-mask-mode: $mode;
mask-mode: $mode;
}
为什么mask-size和mask-position不能写死在Mixin里
因为裁剪效果高度依赖图片尺寸、容器比例和设计意图。比如头像裁成圆角矩形，和Banner图做斜切角，需要的mask-size值完全不同——前者常设cover，后者可能要120% auto来保证边缘不露白。
写死会导致复用性崩塌，一个Mixin只能适配一种场景。更糟的是，如果父容器宽高比变化（比如响应式断点），固定值会直接破坏视觉一致性。
- 把
mask-size、mask-position、mask-repeat都做成可选参数，默认unset - 调用时按需传，例如
@include img-mask("mask.svg", cover, center) - 注意
mask-size: contain在小图遮罩时容易留白，测试时务必用真实尺寸预览
mask-type设alpha还是luminance？关键看遮罩图类型
这个值决定了浏览器怎么解读遮罩图的灰度/透明信息。设错会导致整个裁剪反向或失效——比如你用纯黑底白形SVG做遮罩，却设了alpha，结果只有白色部分被裁掉，而不是你想要的“白形透出”。
绝大多数情况用luminance（默认值）：SVG或PNG遮罩图中，越亮的区域越透，黑色区域完全遮住。只有当你明确用带Alpha通道的PNG，并且靠透明度控制透光区域时，才切到alpha。
- Sass里不建议把这个值写进Mixin主逻辑，而是作为独立参数暴露
- 如果遮罩图是单色SVG（无透明度），
mask-type无效，实际起作用的是mask-mode - Chrome 117+开始支持
mask-border，但目前Sass封装意义不大，兼容性太差
为什么不能用@extend替代Mixin处理图片裁剪
因为@extend会把所有用到该占位符的选择器合并输出，一旦多个组件用不同遮罩图，CSS里就会出现一堆重复的mask-image: url(...)声明，而且无法按需覆盖mask-size等属性——它只继承静态规则，不接受参数。
更隐蔽的问题是：Webpack/Vite的CSS提取插件（如mini-css-extract-plugin）在压缩时可能把@extend生成的长选择器链误判为冗余，悄悄删掉某条遮罩规则。
- Mixin生成的是独立声明块，每个调用都干净可控
- 如果真想减少重复，可用
@function预计算常用尺寸组合，再喂给Mixin - 避免在Mixin里嵌套
@media，响应式遮罩逻辑应由外层容器控制，否则难以调试
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
