如何优化SCSS混入，生成含多端字号的响应式字体类名？

问题分析 #

三重嵌套循环的核心问题是：8px到60px共有53个取值，三重循环会生成53*53*53=148877种字号组合，再乘以3种字重，总类数超过44万，直接导致编译时间过长甚至内存溢出，完全不可行。

修复方案 #

1. 修正混入（mixin）的参数顺序 #

原mixin的参数顺序与类名的字号顺序不匹配，需要调整参数对应关系，确保类名里的「移动端-平板-桌面」字号能正确映射到媒体查询：

$font-weights: (
  'medium': 500,
  'semibold': 600,
  'bold': 700,
);

// 参数顺序：桌面端字号 → 移动端字号 → 平板端字号 → 字重
@mixin typography($desktop-size, $mobile-size, $tablet-size, $font-weight) {
  // 桌面端默认样式
  font-size: $desktop-size;
  font-weight: map.get($font-weights, $font-weight);

  // 移动端（≤576px）
  @media screen and (max-width: 576px) {
    font-size: $mobile-size;
  }
  // 平板端（577px-992px）
  @media screen and (min-width: 577px) and (max-width: 992px) {
    font-size: $tablet-size;
  }
}

2. 优化类生成逻辑：限定常用字号，避免全量循环 #

不要遍历8-60的所有px值，只定义项目中实际会用到的字号列表，大幅减少循环次数：

// 定义常用字号列表（可根据项目需求调整）
$common-font-sizes: 8px, 10px, 12px, 14px, 16px, 18px, 20px, 22px, 24px, 28px, 32px, 36px, 40px, 48px, 56px, 60px;

// 遍历常用字号生成类名
@each $mobile-size in $common-font-sizes {
  @each $tablet-size in $common-font-sizes {
    @each $desktop-size in $common-font-sizes {
      @each $weight-name, $weight-value in $font-weights {
        // 类名格式：font-移动端字号-平板端字号-桌面端字号-字重
        .font-#{$mobile-size}-#{$tablet-size}-#{$desktop-size}-#{$weight-name} {
          @include typography($desktop-size, $mobile-size, $tablet-size, $weight-name);
        }
      }
    }
  }
}

如果常用字号有16个，总组合数为16*16*16*3=12288，这个数量编译起来完全无压力。

3. 更灵活的方式：手动按需生成类 #

如果项目不需要大量预生成的类，可以提供快捷混合宏，只生成实际用到的类，避免无用代码：

// 快捷生成单个响应式字体类的混合宏
@mixin generate-responsive-font-class($mobile-size, $tablet-size, $desktop-size, $weight-name) {
  .font-#{$mobile-size}-#{$tablet-size}-#{$desktop-size}-#{$weight-name} {
    @include typography($desktop-size, $mobile-size, $tablet-size, $weight-name);
  }
}

// 示例：生成需求中的font-14px-18px-22px-bold类
@include generate-responsive-font-class(14px, 18px, 22px, 'bold');

额外建议 #

• 可以给字号列表添加过滤逻辑，比如确保$desktop-size ≥ $tablet-size ≥ $mobile-size，避免生成不符合响应式逻辑的反向字号类（如移动端比桌面端字号大）。
• 如果需要动态自适应字号，可结合clamp()函数，但这与类名预设的场景不同，适合无需固定类名的自适应场景。

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