正确做法是用@mixin强制规范image-set()格式，url()必须写在image-set()前面作为fallback，且路径需指向同一构建产物；Safari对404敏感，需批量检查状态码；复杂响应式需求须用媒体查询替代image-set()。
用 @mixin 封装 image-set() 时必须带单位和引号
直接写 image-set("a.jpg" 1x, "a@2x.jpg" 2x) 看似没问题，但 Sass 编译器完全不校验语法——漏掉 1x 的 x、路径没加引号、@2x 后缀和 2x 单位不一致，都会导致浏览器解析失败，整条 background-image 声明被丢弃，背景变空。
正确做法是用 @mixin 强制规范格式：
@mixin retina-bg($path, $ratio: 2) {
background-image: url("#{$path}");
background-image: image-set("#{$path}" 1x, "#{$path}@#{$ratio}x" #{$ratio}x);
}
-
$path必须是字符串（如"hero-bg.jpg"），不能是无引号变量，否则构建后路径拼接出错 -
@#{$ratio}x和#{$ratio}x必须严格对应：写2x就不能写2或2.0x - 若需支持
3x，别硬编码进 mixin，改用列表参数传入多套路径，避免生成无效声明
fallback 顺序写反会导致旧浏览器连默认图都看不到
CSS 解析规则是“遇到无法识别的值，整条声明失效”。image-set() 在 Edge 12–18、IE 中完全不识别，Firefox 32+ 只认 url() fallback。所以 url() 必须写在 image-set() 前面，否则后者覆盖前者，老浏览器背景就空了。
错误写法（fallback 被覆盖）：
background-image: image-set("a.jpg" 1x, "a@2x.jpg" 2x);
background-image: url("a.jpg");
正确写法（url() 优先兜底）：
background-image: url("a.jpg");
background-image: image-set("a.jpg" 1x, "a@2x.jpg" 2x);
- Webpack/Vite 构建时，
url()和image-set()内的路径必须指向同一构建产物，否则 CDN 缓存可能不一致 - Safari 对 404 极其敏感：只要
image-set()中任一图返回 404，整个函数被抛弃，fallback 也不生效——上线前得用curl -I批量检查所有倍图 HTTP 状态码
纯 image-set() 只响应 DPR，不看视口宽度
如果设计稿要求「小屏用 400w@2x、大屏用 1200w@1x」这类宽度 + 像素比组合逻辑，image-set() 完全做不到，必须切到媒体查询。
SCSS 中可这样组织：
@mixin responsive-bg($small, $large) {
background-image: url($small);
@media (min-width: 768px) and (-webkit-min-device-pixel-ratio: 1),
(min-width: 768px) and (min-resolution: 1dppx) {
background-image: url($large);
}
}
-
min-resolution: 1dppx是标准写法，min-resolution: 192dpi兼容性差，别混用 - 所有
@media块内的background-image都会被浏览器预加载，哪怕最终没匹配上——流量敏感场景要权衡
用 Compass 生成 Retina Sprite 时文件夹命名和格式不能错
Compass 的 retina-sprites 方案依赖固定结构：必须创建 icons 和 icons-2x 两个子文件夹，正常图放前者，高清图放后者，且同名（如 home.png / home@2x.png）。
- 只支持
.png格式，其他格式生成结果不可靠 - 调用时用
@include use-sprite("home")，不带扩展名；Compass 自动判断是否走高清分支 - 生成的 CSS 中，
@media查询条件必须覆盖主流高清判定方式：(-webkit-min-device-pixel-ratio:2)、(min-device-pixel-ratio:2)、(min-resolution: 144dppx)
真正容易被忽略的是：所有路径拼接、后缀替换、媒体查询条件都依赖 Compass 插件内部逻辑，一旦升级或切换构建工具（比如迁移到 Webpack），这套方案会整体失效，不如手写 @mixin 灵活可控。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
