直接用@mixin typography封装字体三要素更可控可维护，因单独$font-size变量无法联动行高、字重、响应式缩放及无障碍语义，必须绑定策略统一输出。
直接用 @mixin typography 封装字体大小、行高、字重三要素，比零散写 font-size + line-height + font-weight 更可控、更易维护。
为什么不能只靠 font-size 变量硬编码？
单独定义 $h1-font-size: 2.5rem 看似简单，但实际项目中会立刻暴露问题：行高不配套、字重没约束、响应式断点里无法联动缩放、无障碍语义缺失。更麻烦的是，当设计系统要求「所有标题行高必须是无单位 1.2」时，你得手动去每个 h1/h2 里补一遍——漏一个就破坏一致性。
真正可维护的做法是把字号、行高、字重作为一组策略绑定，由 @mixin 统一输出：
-
@mixin typography($size, $weight: $font-weight-normal, $lh: 1.2)—— 所有参数带默认值，调用时可只传$size -
$size必须带单位（如1.5rem），避免 mixin 内部做单位转换逻辑 -
$lh用无单位数值（如1.35），防止与em/rem耦合导致缩放异常 - 字重用语义变量（
$font-weight-heading），而非裸数字，便于全局调整
@mixin typography 怎么配合响应式断点？
别在 mixin 外层套 @media，那样会强制所有调用点都响应式；正确做法是把媒体查询嵌在 mixin 内部，按需启用：
@mixin typography($size, $weight: $font-weight-normal, $lh: 1.2) {
font-size: $size;
font-weight: $weight;
line-height: $lh;
@media (min-width: 768px) {
font-size: scale-font($size, 1.1);
}
}
关键点：
- 响应式缩放用函数（如
scale-font）而非硬写1.65rem，保证比例可配置 - 移动端优先，
@media写在 mixin 底部，避免覆盖基础声明 - 如果某处不需要响应式（比如按钮内文字），直接传入固定值，不触发 media 块
怎么防止字体类生成冗余 CSS？
Sass 不会自动过滤或去重，@each 遍历 map 时，哪怕两个类最终编译出完全相同的 CSS 声明（比如 .text-sm 和 .caption 都输出 font-size: 0.875rem），也会各自输出一份——体积白涨，毫无意义。
控制膨胀的关键动作：
- 用
@if过滤掉设计规范禁用的组合，例如@if $size != "xs"跳过超小字号用于正文的场景 - 避免为所有语义名生成全部变体：不是每个
$size都需要对应bold/light字重，按真实使用频率限定 - 字体类命名保持语义（
.text-h1,.text-body-lg），别搞.fs-16这种纯数值类，否则后期无法判断用途、难以删除 - 禁用
!default在字体 map 中滥用，否则不同模块重复定义会覆盖而非合并
最常被忽略的一点：@mixin typography 的调用位置决定它是否能参与 CSS 压缩。如果在深度嵌套选择器里反复调用（比如 .card .title { @include typography(1.75rem); }），即使内容相同，也会因父选择器不同而无法被 PostCSS 或构建工具合并。真要复用，优先提取成独立类，而非在多处重复 include。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
