如何优化Sass批量生成深浅色背景类代码，支持多颜色变量统一配置

// 定义颜色分组映射，支持批量新增/修改颜色，无需调整生成逻辑
$theme-colors: (
  primary: #00a1e5,
  success: #28a745,
  warning: #ffc107,
  danger: #dc3545,
  info: #17a2b8
);

// 统一生成深浅背景类的核心逻辑
@each $color-name, $color-value in $theme-colors {
  @for $i from 1 through 100 {
    @if $i % 5 == 0 {
      $percentage: $i * 1%;
      // 合并加深、加浅的重复生成逻辑
      @each $mode, $mix-color in (darken: black, lighten: white) {
        .bg-#{$color-name}.bg-#{$mode}-#{$i} {
          background-color: mix($mix-color, $color-value, $percentage) !important;
        }
      }
    }
  }
}

实现说明 #

• 多颜色分组管理：所有主题色统一维护在$theme-colors映射结构中，新增/删除颜色只需要修改映射的键值对即可，不需要改动生成逻辑
• 自动生成全量样式：遍历颜色映射时会自动为每个颜色生成对应的darken加深、lighten加浅系列背景类，类名规则和原有代码完全兼容
• 冗余逻辑合并：通过嵌套@each遍历深浅模式和对应混合色，把原有的两段重复生成逻辑合并为一段，代码简洁度大幅提升
• 可灵活扩展：如果要调整透明度步进值、类名前缀、是否启用!important规则，只需要修改一处即可全局生效

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