SCSS中如何为已统一字体族的h1/h2/h3设置差异化字号？

嘿，很高兴看到你在摸索SCSS的用法！针对你的问题，其实有几种灵活的方式来处理，完全不用重复写字体族的声明，也能轻松给每个标题设置不同字号：

方式一：直观单独声明（适合简单场景） #

你已经通过集体选择器给h1、h2、h3统一设置了字体族，接下来只需要单独给每个标题添加字号样式就行，浏览器会自动合并这部分样式，不需要重复写font-family：

// 统一字体族
h1, h2, h3 {
  font-family: 'Quicksand', sans-serif;
}

// 单独设置字号
h1 {
  font-size: 2.5rem; // 根据你的需求调整数值
}

h2 {
  font-size: 2rem;
}

h3 {
  font-size: 1.5rem;
}

方式二：用SCSS循环批量处理（适合更高效的写法） #

如果以后要调整更多标题样式，用@each循环会更简洁，也方便后续维护：

// 统一字体族
h1, h2, h3 {
  font-family: 'Quicksand', sans-serif;
}

// 循环批量设置字号
@each $heading, $size in (h1: 2.5rem, h2: 2rem, h3: 1.5rem) {
  #{$heading} {
    font-size: $size;
  }
}

两种方式都能达到目的，第一种更直观，适合刚上手的场景；第二种是SCSS特有的便捷写法，能减少重复代码，推荐在样式较多时使用～

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