如何使用SCSS为所有标题元素设置统一字体家族并单独调整各标题字号？

当然可以在公共选择器内部用嵌套写法实现，SCSS提供了多种比原生CSS更简洁的实现方式，下面是两种常用方案：

方案1：父选择器嵌套写法（最贴合你需求的轻量写法） #

这种就是你提到的在公共选择器内嵌套的实现方式，用&父选择器标识即可，编译后和你给出的原生CSS效果完全一致，没有冗余代码：

h1, h2, h3, h4 {
  font-family: 'Barlow Condensed', sans-serif;

  &h1 { font-size: 150px; }
  &h2 { font-size: 100px; }
  &h3 { font-size: 70px; }
  &h4 { font-size: 50px; }
}

这里的&会自动匹配父级选择器组里的每一个元素，编译后会自动生成对应独立的字号规则，和你手写原生CSS的输出结果完全相同。

方案2：循环遍历写法（更适合长期维护的项目场景） #

如果后续可能调整标题范围、或者需要批量修改字号，更推荐用SCSS的map+@each循环的写法，只需要维护一个字号映射表即可，后续增删改规则都不需要调整逻辑代码：

// 自定义标题与对应字号的映射表，后续修改仅需调整这部分
$heading-sizes: (
  h1: 150px,
  h2: 100px,
  h3: 70px,
  h4: 50px
);

// 遍历映射表自动生成所有标题样式
@each $heading, $size in $heading-sizes {
  #{$heading} {
    font-family: 'Barlow Condensed', sans-serif;
    font-size: $size;
  }
}

这种写法的优势是可扩展性极强，后续要新增h5规则只需要在$heading-sizes里加一行键值对即可完成。

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