SCSS中的list是空格或逗号分隔的值序列，非数组；需用length()、nth()、list-separator()等函数处理；字体声明须quote()加引号、join()拼接；复杂场景应结合map管理多语言或@font-face配置。
SCSS中list不是数组，而是用空格或逗号分隔的值序列
很多人误以为 SCSS 的 list 类似 JavaScript 数组，能直接遍历或索引操作。实际上它更像 CSS 值的“扁平化容器”——font-family: "Helvetica", Arial, sans-serif 这整串在 SCSS 里就是一个以逗号分隔的 list；而 16px 24px 32px 是一个空格分隔的 list。类型判断要用 type-of($val) == list，但后续处理必须配合 length()、nth() 和分隔符检测函数 list-separator()。
批量声明字体族时，关键不是“存字体”，而是“控制输出格式”：是否加引号、是否补备选字体、是否生成多套 @font-face 规则。
用each遍历字体名列表并生成font-family声明
最常见需求是为多个字体组合生成统一的 font-family 声明（比如一套品牌字体 + fallback）。注意：SCSS 不会自动给字体名加引号，中文或含空格的字体名必须手动包裹。
- 用
quote()确保每个字体名被双引号包裹，避免解析错误 - 用
join()拼接成合法的 font-family 值，指定分隔符为, - 避免把整个 list 直接插进属性值里，否则会丢失引号和空格
$brand-fonts: "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
$font-stack: join(quote("Inter"), $brand-fonts, comma);
body {
font-family: $font-stack;
}
编译后：font-family: "Inter", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
立即学习“前端免费学习笔记（深入）”；
用map配list实现字体族与权重/样式映射
纯 list 无法关联元信息。真正批量管理字体族（尤其涉及不同字重、斜体、本地字体路径）时，得用 map 存配置，再用 map-get() 提取对应 list。例如定义中文字体栈时，需区分「简体优先」和「繁体优先」两套 fallback 顺序：
$font-stacks: (
zh-CN: ("Noto Sans CJK SC", "Source Han Sans SC", "Microsoft YaHei", sans-serif),
zh-TW: ("Noto Sans CJK TC", "Source Han Sans TC", "Microsoft JhengHei", sans-serif),
en: ("Inter", "system-ui", sans-serif)
);
@each $lang, $stack in $font-stacks {
html[lang="#{$lang}"] {
font-family: join(quote(nth($stack, 1)), nth($stack, 2), comma);
}
}
这里 nth($stack, 2) 取出除首项外的其余字体（即 fallback 部分），避免重复声明首字体。注意 join() 第二个参数必须是 list，不能是单个字符串。
生成@font-face规则时，list要配合font-display和unicode-range
批量注册自定义字体时，list 通常承载 src 多格式路径。但容易忽略两点：一是 src 值内各字体源之间用逗号分隔，而每个源内部用空格分隔；二是 unicode-range 必须按需拆分，不能把所有范围硬塞进一个 list。
- 用
append()或join()构造src值，确保每个url()后跟format() -
unicode-range若需分段（如中日韩分别加载），应单独用 map 控制，而非依赖 list 长度 - 不要对 list 直接做
font-weight: $list—— 字重是数字或关键字，不是 list
真正麻烦的是 fallback 行为：浏览器按 src 顺序尝试加载，但若首个格式不支持（如旧 Android 不认 woff2），就得靠后续格式兜底。这时候 list 的顺序比内容更重要。
