如何利用SCSS的list数据类型批量声明字体族CSS属性-css教程-PHP中文网

SCSS中的list是空格或逗号分隔的值序列，非数组；需用length()、nth()、list-separator()等函数处理；字体声明须quote()加引号、join()拼接；复杂场景应结合map管理多语言或@font-face配置。

如何利用scss的list数据类型批量声明字体族css属性

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 顺序：

CSS工具箱(专业版)

全功能 CSS 工程手册，覆盖性能优化、无障碍、设计系统与跨浏览器兼容。

下载

$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，不能是单个字符串。