不能直接硬编码h1 { font-size: 2.5rem; }，因为这会将设计逻辑固化在css中，导致暗色模式或移动端调整时需全局搜索替换、无法联动主题变量（如$type-base），必须通过calculate-scale函数统一生成字号阶梯，确保改一处、全更新。
直接用 calculate-scale 函数 + 断点数组 + 响应式 @for 循环，就能在 50 行内搭出可维护、可主题化、不依赖 pow() 的字号阶梯系统。
为什么不能直接写 h1 { font-size: 2.5rem; }？
硬编码标题字号等于把设计逻辑焊死在 CSS 里。一旦需求变成「暗色模式下所有标题放大 5%」或「移动端统一缩小 12%」，就得全局搜索替换——漏改一个 h4 就导致视觉断裂。更糟的是，这种写法完全无法和主题变量联动：$type-base 改了，h1 到 h6 还是旧值。
必须把字号生成逻辑收口到函数里，让所有标题都调用同一个入口，才能实现“改一处，全更新”。
calculate-scale 函数怎么写才真正可用？
别用 pow($ratio, $level - 1) —— Dart Sass 1.15 及更早版本不支持，CI 构建会直接报 Undefined function "pow"。稳妥做法是预计算好系数数组，查表返回：
@function calculate-scale($level, $base: 1.25rem, $ratio: 0.85) {
$scales: 1, 0.85, 0.7225, 0.6141, 0.522, 0.4437;
@if $level 6 or not index($scales, nth($scales, $level)) {
@error "Invalid heading level: #{$level}. Must be 1–6.";
}
@return $base * nth($scales, $level);
}
-
$level必须是整数 1–6，超出范围直接报错，避免静默失败 -
$base应对接主题变量（如$type-base: 1rem），而非写死16px -
$ratio: 0.85是实测平衡点：太小（如 0.8）会让h6掉到0.6rem，小屏阅读吃力；太大（如 0.9）又削弱层级感
响应式字号怎么避免生成冗余媒体查询？
别在 @for 循环里嵌 @media ——那样会为每个 h1–h6 都生成独立的媒体块，CSS 体积翻 6 倍，且浏览器无法合并相同断点的查询。
正确做法是按断点预定义字号数组，再统一循环输出：
$heading-sizes-sm: 1.5rem, 1.25rem, 1.125rem, 1rem, 0.875rem, 0.8125rem;
$heading-sizes-md: 2rem, 1.5rem, 1.25rem, 1.125rem, 1rem, 0.875rem;
<p>@media (max-width: 768px) {
@for $i from 1 through 6 {
h#{$i} { font-size: nth($heading-sizes-sm, $i); }
}
}</p><p>@media (min-width: 769px) {
@for $i from 1 through 6 {
h#{$i} { font-size: nth($heading-sizes-md, $i); }
}
}</p>
- 数组值可单独调整某一级（比如只改
h3在小屏下的尺寸），不影响其他层级 - 编译后 CSS 干净，无重复媒体查询，也方便设计师直接改数组
- 若需更多断点，只需新增数组 + 新增
@media块，结构清晰
主题变量怎么安全注入到字号系统？
所有基础尺寸变量必须带 !default，并在顶层文件（如 _variables.scss）中优先导入：
$type-base: 1rem !default;
$heading-ratio: 0.85 !default;
<p>// 后续所有 calculate-scale 调用都基于这两个变量
h1 { font-size: calculate-scale(1, $type-base, $heading-ratio); }</p>
- 项目级覆盖只需在
main.scss最开头重定义变量，无需动函数本身 - 切忌在函数内部写
$type-base: 1rem——那会覆盖外部传入值，失去主题能力 - 暗色模式等场景，只需在对应 class 下重新赋值
$type-base，整个字号阶梯自动重算
最易被忽略的是函数参数作用域：SCSS 中局部变量会屏蔽同名全局变量，calculate-scale 内部绝不能重新声明 $base 或 $ratio，否则主题变量失效。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
