如何用Sass生成字号递减的H1至H6标题CSS样式

需求说明 #

需要生成H1至H6的CSS样式，要求：

• H1字号为3.5rem
• 每个后续标题字号递减0.5rem

目标CSS代码如下：

h1 {font-size:3.5rem;}
h2 {font-size:3rem;}
h3 {font-size:2.5rem;}
h4 {font-size:2rem;}
h5 {font-size:1.5rem;}
h6 {font-size:1rem;}

原代码问题分析 #

你尝试的Sass代码存在两个核心问题：

1. 单位运算错误：直接用$size - $i是将带单位的字号与整数相减，不符合Sass的数值运算规则
2. 递减逻辑错误：需求是每次递减0.5rem，但原代码的递减幅度为1，且未处理H1无需递减的情况

正确的Sass代码 #

$base-size: 3.5rem;
$decrement-step: 0.5rem;

@for $i from 1 through 6 {
  h#{$i} {
    font-size: $base-size - ($i - 1) * $decrement-step;
  }
}

代码解释 #

• $base-size：定义H1的初始字号
• $decrement-step：定义每个标题的字号递减幅度
• 循环计算逻辑：通过($i - 1) * $decrement-step计算当前标题需要减去的总幅度——H1时$i=1，减去0；H2时$i=2，减去0.5rem，以此类推，完美匹配需求的递减规则

编译这段Sass代码后，即可生成你需要的目标CSS。

内容的提问来源于stack exchange，提问作者shaijuelayidath