最稳妥方式是用 SCSS @for $i from 1 through 6 生成 h1–h6 样式，配合基准字号、预设边距数组、条件字重及顶层重置规则，避免语义错乱与样式污染。
直接用 @for 循环生成 h1 到 h6 的样式最稳妥，别手写六遍，也别试图用 @each 配数组硬套——语义和顺序都容易出错。
用 @for $i from 1 through 6 生成标题层级
SCSS 的 @for 天然适配数字序列，h1–h6 正好是连续整数，无需额外映射。关键在于：字体大小、行高、粗细这些属性要随层级线性或指数变化，不能全写死。
-
$base-font-size: 2rem作为基准，h#{$i}的font-size可设为$base-font-size * pow(0.85, $i - 1)（逐级缩小）或$base-font-size / $i * 1.2（更可控） - 避免在循环里写
margin-bottom: 1rem * $i这类简单倍增——h1下边距太大反而破坏节奏，建议用预设数组：$heading-margins: 1.5rem, 1.25rem, 1rem, 0.875rem, 0.75rem, 0.625rem，再用nth($heading-margins, $i) - 必须加
font-weight: #{if($i == 1, 700, 600)}这类条件判断，否则所有标题都一样重，h1失去视觉优先级
h1–h6 的语义与选择器嵌套陷阱
别在组件内部用 .card h1 { ... } 这种写法覆盖全局标题样式——它会污染其他地方的 h1，且无法响应父级主题切换（比如暗色模式）。正确做法是把标题样式保持为顶层规则，靠 class 控制变体。
PigX UI 前端开发
下载
PigX UI Pro 前端开发指南 - Vue 3 + TypeScript + Element Plus。当用户提到 PigX UI、PigX 前端、lgb-mgui 项目、Vue 3 企业级后台开发、Element Plus 后台开发时使用此技能。
- 写成
h1, h2, h3, h4, h5, h6 { margin: 0; }开头重置，再用@for补充差异化样式，避免继承干扰 - 如果组件需要定制标题（如卡片标题），应定义新 class：
.card-title，而不是强行改h2；否则当 CMS 输出原生h2时，样式就乱了 - 注意 HTML5 outline 算法：跳过层级（比如只用
h1和h3）不会导致结构错误，但 SCSS 循环仍要生成全部 6 级——留着备用，不等于必须全用
响应式标题尺寸不能只靠 @media 套一层
移动端字号不能简单地给所有 h#{$i} 加 @media (max-width: 768px)，那样会导致小屏下 h1 和 h6 缩放比例失衡。得按层级分别调整。
立即学习“前端免费学习笔记（深入）”；
- 在
@for循环内嵌@media是合法的，但编译后 CSS 体积会翻倍；更优解是提取断点变量：$heading-sizes-sm: 1.5rem, 1.25rem, 1.125rem, 1rem, 0.875rem, 0.8125rem，循环中用@include media-breakpoint-down(sm) { font-size: nth($heading-sizes-sm, $i); } - 千万别用
em或rem在循环里做动态计算（比如font-size: 2rem / $i），SCSS 编译时rem不参与运算，结果会是字面量拼接，生成无效 CSS - Webkit 内核对
font-size: clamp()支持良好，可考虑在循环中直接写：font-size: clamp(1.25rem, 4vw, #{nth($desktop-sizes, $i)});，但需确认构建工具是否支持 CSS 函数内插值
真正麻烦的不是生成六级标题，而是让它们在真实页面结构里不打架——h1 被塞进 article 里时，它的 margin 是否该继承父容器的 spacing？这类上下文适配没法靠循环解决，得靠 BEM 或 utility class 协同控制。
