用 $font-stacks Map 存储多套字体堆栈并配合 font-stack() 函数调用，比单变量更可控、可扩展、易维护；因单变量无法区分中英文混排场景、难新增字体类型、不支持动态权重、导致 CSS 重复冗长。
直接结论：用 $font-stacks Map 存储多套字体堆栈，配合 font-stack() 自定义函数按语义调用，比零散变量或硬编码更可控、可扩展、易维护。
为什么不能只用几个 SCSS 变量存字体？
单变量如 $font-sans 或 $font-mono 看似简洁，但实际项目中很快会暴露问题：
- 中英文混排需不同堆栈（比如中文优先用
"Microsoft YaHei"，西文 fallback 用Arial），单变量无法区分语义场景 - 新增一种字体类型（如专用于代码块的
code-font）就得改所有引用点，还容易漏掉pre、kbd等选择器 - 无法动态插入权重或样式参数（例如某些组件需要
font-weight: 500的 sans 堆栈，但其他地方是normal） - 编译后 CSS 里全是重复的长字符串，不利于 gzip 压缩和调试定位
怎么用 Map 定义可复用的字体堆栈？
核心是把“一类用途 + 一套字体顺序”封装成一个 Map 条目，key 是语义名（必须加引号），value 是字体列表（字符串数组或逗号分隔字符串均可）：
$font-stacks: ( "sans": '"Microsoft YaHei", "Helvetica Neue", Helvetica, Arial, sans-serif', "serif": '"Georgia", "Times New Roman", Times, serif', "mono": '"Fira Code", "Consolas", "Courier New", monospace', "chinese-ui": '"PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif' );
注意："sans" 这类 key 必须是字符串字面量，写成 sans: 会报错 Undefined variable "sans"；值里中文字体名带空格，必须用双引号包裹。
如何通过函数安全提取并生成 font-family 值？
不建议在每个选择器里手动写 map-get($font-stacks, "sans") —— 容易拼错 key、漏引号、不兼容老版本 Sass（map-get 在 Dart Sass 1.30+ 才稳定支持空格字体名）。推荐封装一层函数：
@function font-stack($type) {
@if map-has-key($font-stacks, $type) {
@return map-get($font-stacks, $type);
}
@warn "Unknown font stack type '#{$type}'";
@return sans-serif;
}
使用时直接：.body { font-family: font-stack("sans"); } 或 .code { font-family: font-stack("mono"); }。函数还能加参数做轻量定制，比如：
- 传
$weight: 500，内部自动拼接font-weight声明（需配合font复合属性） - 传
$fallback: false，跳过末尾的sans-serif等通用族，适合严格字体控制场景
容易被忽略的兼容性与输出细节
Map 方式看似干净，但实际编译结果受 Sass 版本和输出格式影响：
- Dart Sass 1.40+ 对含空格的字体名（如
"Microsoft YaHei"）默认保留双引号；旧版 LibSass 可能去掉引号，导致 IE/Edge 旧内核解析失败 - 如果在
@each中遍历$font-stacks自动生成重置规则，务必用#{$key}插值，写成$key会输出字面量而非实际值 - 不要在 Map value 里写
#{...}动态插值——Sass 不允许 Map 值含未求值表达式，会编译失败 - 字体路径中若含本地相对路径（如
file://./fonts/myfont.woff2），需确认构建工具是否支持该协议，多数现代打包器会拦截或报错
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
