Sass 中 append() 返回列表而非字符串，须用 join() 转为逗号分隔字符串才能用于 font-family；字体名必须统一加引号，避免类型混杂与解析错误。
append 函数不能直接用于 CSS 声明值中
很多人试过 append($fonts, "Helvetica") 然后直接写进 font-family: $new-fonts;，结果编译报错或输出意外字符串。Sass 的 append 返回的是 Sass 列表（list），不是可直接插入 CSS 的字符串；CSS 不认识 Sass 数据结构，必须显式转成用逗号分隔的字符串。
常见错误现象：font-family: "Arial", "sans-serif" "Helvetica";（少逗号、多空格、引号嵌套错）——这是没做 join() 导致的典型输出。
- 使用场景：动态追加备用字体（如从配置变量注入品牌字体）、按环境切换默认字体栈
-
append第二个参数必须与原列表元素类型一致（全带引号 or 全不带），否则生成混合类型列表，join()会把 unquoted 值转成关键字，引发语法错误 - 性能无影响，但嵌套多层
append易读性差，建议单次构建或用@function封装
正确拼接字体族的三步操作
核心是：构造列表 → 追加 → 转字符串。别跳步。
示例（Sass）：
立即学习“前端免费学习笔记（深入）”；
$base-fonts: ("Inter", "system-ui", "Segoe UI");
$extended-fonts: append($base-fonts, "Helvetica Neue");
font-family: #{join($extended-fonts, ", ")};
-
append()只修改列表结构，不改变原变量；要覆盖需显式赋值：$base-fonts: append($base-fonts, "IBM Plex Sans"); -
join($list, ", ")是关键，它把列表元素用指定分隔符拼成纯字符串；注意第二个参数是带空格的", "，不是, - 如果某字体名含空格（如
"Times New Roman"），必须用引号包裹在原始列表中，否则 Sass 会拆成多个 token
处理字体名中的斜杠或连字符等特殊字符
像 "PT Sans / Narrow" 或 "Source Code Pro" 这类含空格/斜杠的字体名，Sass 默认解析时容易断裂。不是 append 的问题，而是原始定义方式不对。
- 必须统一用双引号包裹所有字体名，哪怕它看起来“合法”（如
"sans-serif"也要引起来，避免被当 keyword） - 斜杠
/在字体族中是分隔符（如"Helvetica / Arial"），但实际 CSS 不支持这种写法；它属于设计稿误标，应改为逗号 —— 所以真正要处理的是人肉录入错误，不是 Sass 解析问题 - 若真需保留斜杠（极少见），得用转义：
"Helvetica \/ Arial"，但浏览器不认，不推荐
用 @function 封装动态字体栈更安全
手动链式 append + join 容易漏掉引号或空格，尤其多人协作时。封装函数能固化规则。
示例：
@function font-stack($base, $additions...) {
$stack: $base;
@each $font in $additions {
$stack: append($stack, $font);
}
@return join($stack, ", ");
}
// 使用
body {
font-family: #{font-stack(("Inter", "system-ui"), "Segoe UI", "Roboto")};
}
-
$additions...支持传入任意多个字体，比反复调append清晰 - 函数内强制用
append循环，避免手误导致部分字体未加引号 - 返回前必须用
join，函数本身不能返回列表给 CSS 属性用
append，而在于团队对字体名格式的约定是否统一——有人写 sans-serif，有人写 "sans-serif"，混在一起就会让 join 输出无效 CSS。这事没法靠工具兜底，得靠代码审查卡住。 
