多重背景需严格对齐各层background-image、position、size、repeat等参数，css用逗号分隔多层值，sass推荐用map而非list组织每层属性，避免索引错乱；须用join()合并生成单行声明，注意单位顺序与兼容性。
多重背景写法本身不依赖 Sass，但手动写容易漏参数
纯 CSS 的 background 支持逗号分隔多层值，比如渐变叠图片、颜色打底加纹理。但每层都要对齐 background-image、background-position、background-size 等，手写 3 层以上极易错位或遗漏某一层的 background-repeat。
- 常见错误现象：
background: url(a.png), linear-gradient(red, blue);写了两层图片，但没配对应的background-position: top left, center;，结果第二层默认居中盖掉第一层 - 使用场景：卡片悬停叠加毛玻璃效果、按钮带图标+渐变、模态框背景加噪点纹理
- 关键点：CSS 多重背景是“从前往后绘制”，第一项在最上层，所以 Sass 遍历时顺序不能反
@each 遍历生成多重背景必须用 map 而不是 list
因为每层背景需要多个属性（图、位置、尺寸、重复方式），用 list 只能扁平存值，后期难维护；map 可以按层组织键值对，遍历时清晰对应。
- 错误写法：
@each $val in (url(a.png), top, cover, no-repeat, url(b.png), center, contain, repeat)—— 容易索引错乱，无法语义化扩展 - 正确结构：
$layers: (layer1: (img: url(a.png), pos: top left, size: cover, repeat: no-repeat), layer2: (img: url(b.png), pos: center, size: contain, repeat: repeat)); - 性能影响：Sass 编译期展开，不影响运行时；但 map 嵌套过深（>5 层）会让编译变慢，建议单个组件控制在 4 层内
生成的 background 属性要合并成一行，不能拆开写
CSS 多重背景必须所有层的对应属性用逗号连成一个声明，比如 background-image: url(a.png), url(b.png);，而不是分别写两条 background-image —— 后者只会保留最后一条。
- 典型坑：
@each $k, $v in $layers { background-image: map-get($v, img); }会生成多条background-image，实际只生效最后一层 - 实操解法：用
join()把各层值拼成字符串，再一次性赋给background-image等属性 - 示例片段：
$imgs: join($imgs, map-get($v, img), comma);，最后输出background-image: #{$imgs}; - 兼容性注意：IE 不支持多层
background，若需兼容，得 fallback 到单层 +::before伪元素模拟
真正难的是各层 background-size 和 background-position 的单位混用
图标用 16px，渐变用 100% 100%，纹理图用 20px 20px，这些单位在 Sass 里没法自动推导，必须显式定义，否则拼出来的值无效。
- 容易踩的坑：
map-get($v, size): 16px和map-get($v, size): cover混在一个变量里，join()会把cover当字符串拼进去，导致background-size: 16px, cover合法，但background-size: cover, 16px就非法（顺序反了） - 解决办法：约定每层
size字段必须是字符串，如"16px"或"cover"，避免 Sass 类型转换干扰 - 调试技巧：编译后检查生成的 CSS 是否每层
background-*属性逗号数一致，比如 3 层背景，background-position值里必须有且仅有 2 个逗号
多层背景本身不复杂，麻烦的是各层参数的“对齐感”——位置、尺寸、重复方式必须严格按层一一对应，少一个逗号，整条样式就失效。Sass 只是帮你少写几遍，填错 map 里的某个字符串，照样白忙活。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
