推荐用 @mixin typography($size, $weight, $lh) 封装字体样式，以 rem 为单位、无单位行高、语义化字重变量，兼顾响应式、可维护性与无障碍；CSS 变量适合动态主题，Sass mixin 更适合设计系统约束与兼容性保障。
怎么用 @mixin 把字体大小、行高、字重这些一次性配齐
直接封装成带参数的 @mixin 最省事，比如叫 typography，传入 $size、$weight、$line-height 就能生成一整套声明。别写一堆零散的 font-size + line-height + font-weight，维护时改三处容易漏。
常见错误是把单位硬编码进 mixin 里，比如写死 px —— 这样响应式断点里没法缩放。应该让调用方传带单位的值（如 1.25rem），或者内部用 rem 基准统一换算。
- 推荐用
rem为基准，根元素font-size设为16px或可配置变量 - 行高建议用无单位数值（如
1.5），避免和字号单位耦合 - 字重别只写数字，用语义化变量：$font-weight-normal: 400; $font-weight-bold: 700;
@mixin typography($size: 1rem, $weight: $font-weight-normal, $lh: 1.5) {
font-size: $size;
font-weight: $weight;
line-height: $lh;
}
为什么不能只靠 CSS 自定义属性（CSS Custom Properties）管字体
CSS 变量确实能 runtime 修改，但 Sass 的 @mixin 是编译期逻辑，适合做「设计系统级约束」——比如强制标题只能用 1.5rem/2rem/2.5rem 这几档，不让你随便输 1.73rem。CSS 变量做不到这种校验。
另一个现实问题是兼容性：var(--font-h2) 在 IE 完全不支持，而 Sass 编译后是纯 CSS，无兼容负担。如果项目还要支持旧浏览器，mixins 是更稳的选择。
- 想动态换肤？可以混用：Sass 生成基础 typography 规则，再用 CSS 变量覆盖颜色或字号比例
- 别在 mixin 里嵌套
var()，Sass 不认识它，会原样输出导致无效 CSS - CSS 变量适合控制「可变部分」（如主题色），Sass mixin 适合固化「结构部分」（如 H1/H2 的字号阶梯）
@include typography 调用时哪些参数必须传、哪些能省略
所有参数都设默认值，调用时一个都不传也不会报错，但实际项目中至少得传 $size，否则所有文本都是 1rem，失去语义区分。字体大小是 typography 的核心维度，其他如字重、行高倒是可以靠默认值兜底。
容易踩的坑是传错类型：比如把字符串 "bold" 传给 $weight，而 mixin 内部直接塞进 font-weight: 后面，结果生成 font-weight: "bold"; —— 浏览器忽略这条声明。必须确保传的是数字或已定义的变量。
- 安全做法：
$weight默认用$font-weight-normal变量，而非裸数字400 - 如果某处需要斜体，别塞进
$weight，另加一个$style参数，默认normal - 移动端小屏要缩放字号？在媒体查询里重新
@include，别试图在 mixin 里写条件逻辑
Sass 模块化后 @mixin typography 放哪最合适
别塞进 _variables.scss —— 那里只该放纯数据（颜色、间距、断点值）。Typography mixin 属于「行为」，应归到 _mixins.scss 或更细的 _typography.scss，然后在 index.scss 或 base.scss 中统一引入。
如果项目用了 Dart Sass 的模块系统（@use），注意命名空间问题：引入后得写 type.typography(...)，比老式 @import 多一层前缀，但更安全。别为了省两个字用 @forward 把所有 mixin 扁平暴露，后期冲突难排查。
- 全局可用的 typography mixin，用
@use "typography" as type;导入最清晰 - 组件内部私有字体规则？直接在组件 SCSS 文件里写局部 mixin，别污染全局
- Webpack/Vite 环境下确保 Sass 加载器配置了
includePaths，否则@use "abstracts/typography"找不到文件
实际项目里最常被忽略的，是字体缩放与无障碍的关系：字号不能只按设计师稿定死，要留出用户系统级字体放大的余量。用 rem + 根元素相对缩放，比固定 px 更靠谱。这点 mixin 本身不解决，但结构上得为它留出接口。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
