如何在SCSS中创建通用的半命名主题颜色类？

SCSS 批量生成半命名通用CSS类实现方案 #

完全可以实现，你可以借助SCSS的@each循环批量遍历颜色配置，一次性生成所有需要的类，维护成本更低。

基础实现（贴合你需求的版本） #

直接定义颜色列表遍历即可：

// 先定义所有需要的颜色列表
$theme-color-list: yellow, red, blue;

// 遍历生成对应类
@each $color in $theme-color-list {
  .theme-color-#{$color} {
    color: $color;
  }
}

编译后生成的原生CSS就是你需要的效果：

.theme-color-yellow {
  color: yellow;
}
.theme-color-red {
  color: red;
}
.theme-color-blue {
  color: blue;
}

HTML 用法和你示例的完全一致：

<div class="theme-color-red"></div>

进阶灵活用法 #

如果需要类名后缀和实际色值不匹配（比如用业务语义命名颜色），可以用Sass映射配置：

// 键为类名后缀，值为实际色值，可灵活扩展
$theme-colors: (
  "yellow": #fadb14,
  "red": #ff4d4f,
  "blue": #1890ff,
  "primary": #165dff
);

@each $name, $color in $theme-colors {
  .theme-color-#{$name} {
    color: $color;
  }
  // 还可以同时批量生成背景色、边框色类，不用重复写逻辑
  .theme-bg-#{$name} {
    background-color: $color;
  }
  .theme-border-#{$name} {
    border-color: $color;
  }
}

后续需要新增颜色时，只需要在$theme-colors映射里新增配置项即可，不需要重复编写类结构，扩展性更强。

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