Sass 中需用自定义函数将图片列表逐项包裹为 url() 后逗号拼接，再赋值给单个 background-image；直接 @each 会覆盖声明，list.join() 无法自动添加 url()。
如何用 Sass List 实现多重背景图片的 CSS 拼接
直接说结论：Sass 的 @each 配合 list.join() 或字符串拼接能生成合法的多层背景值，但必须手动控制语法层级——background-image 不接受嵌套列表，只吃逗号分隔的函数序列。
为什么不能直接 @each $img in $list 然后输出 url(#{$img})
常见错误是写成这样：
$imgs: "a.jpg" "b.jpg" "c.jpg";
@each $img in $imgs {
background-image: url(#{$img});
}
结果会生成三条独立的 background-image 声明，浏览器只认最后一条，前两条被覆盖。多层背景必须写在同一行、用英文逗号分隔，且每项保持完整函数形式（如 url(...)、linear-gradient(...)）。
- 必须把所有图层拼成一个字符串，再赋给单个
background-image -
list.join($imgs, ", ")会把"a.jpg" "b.jpg"变成"a.jpg, b.jpg"，但缺少url()包裹 - 得先用
@function把每个路径转成url("...")，再拼接
安全拼接多层背景的函数写法
推荐封装一个可复用的函数，处理路径合法性与引号转义：
立即学习“前端免费学习笔记（深入）”；
@function bg-url-list($list) {
$result: "";
@for $i from 1 through length($list) {
$item: nth($list, $i);
$result: $result + "url(#{" + quote($item) + "})";
@if $i != length($list) {
$result: $result + ", ";
}
}
@return $result;
}
$bg-layers: "top.svg" "mid.png" "bottom.jpg";
.element {
background-image: #{bg-url-list($bg-layers)};
}
生成结果是：background-image: url("top.svg"), url("mid.png"), url("bottom.jpg");
-
quote()确保路径带双引号，避免空格或括号引发解析错误 - 不用
list.join()直接拼，是因为它不支持对每个元素做url()包裹 - 如果某层要用渐变，可把 $list 设为混合类型（如
("a.jpg", "linear-gradient(to right, red, blue)")），函数里加@if type-of($item) == string分支判断
兼容性与动态场景下的注意点
IE10+ 支持多层背景，但拼接逻辑本身无运行时开销——Sass 是编译期处理，最终只输出静态 CSS。
- 别在
@media或@supports内部重复调用该函数，会导致冗余代码；应先拼好再注入 - 若需响应式切换图层数量（比如移动端只留一层），得定义多个 List 变量，而非试图运行时修改 List 长度
- 路径含变量时（如
$base-path + "/icon.svg"），确保拼接前已求值，否则quote()会把表达式原样包进去
最易忽略的是：拼出的字符串末尾不能有多余逗号，也不能漏掉任意一层的 url() 或函数包裹——CSS 解析器遇到 url(a.jpg), linear-gradient(...), 这种结尾逗号会直接丢弃整条声明。
