优化慈善板块SCSS代码：背景色及淡色版本实现方案咨询

你的代码功能正常，但存在大量重复的类定义，维护起来很麻烦——新增或修改领域颜色时要改好几处。用SCSS的Map配合循环可以大幅简化代码，同时保持功能不变：

/**************************************
Charity Colours
****************************************/

// 用Map统一存储所有慈善领域的颜色，增删改只需要在这里操作
$charity-colors: (
  animals: #a9efea,
  babies: #fae08c,
  cancer: #f4c9c8,
  community: #b3ddf2,
  deaf: #9FC279,
  mental: #CB89D5,
  elderly: #CCDCD4,
  rescue: #F4BD88,
  medical: #D0879C,
  hospice: #F0D3FA,
  human: #D3E0AD,
  military: #CBC3AD,
  overseas: #96C0E5,
  sports: #939393
);

$color-tint: 0.3;

// 循环生成普通背景类
@each $name, $color in $charity-colors {
  .#{$name}-bg {
    background: $color;
  }
}

// 循环生成淡色背景类
@each $name, $color in $charity-colors {
  .#{$name}-bg--tint {
    background: rgba($color, $color-tint);
  }
}

优化点说明： #

• 统一管理颜色：所有颜色都存在$charity-colors这个Map里，新增领域、修改颜色只需要修改这一处，不用到处找对应的类。
• 自动生成类：通过@each循环自动遍历Map里的每一组键值对，生成对应的背景类，彻底消除重复代码。
• 可扩展性强：以后新增慈善领域，只需要在Map里加一行领域名: 颜色值，循环会自动生成普通和淡色两个类，不用手动写重复代码。

编译后的CSS和你原来的代码完全一致，但SCSS源码简洁了不止一半，维护成本大大降低。

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