如何在SCSS中基于className实现按钮颜色配置的简洁写法

你的思路是完全可行的，SCSS 可以通过 @each 遍历颜色映射的方式批量生成这类类名，不需要逐个手动声明。

首先你需要先定义一个颜色映射表，把类名后缀和对应的颜色值配对，之后循环遍历这个表就能批量生成所有规则：

// 先定义颜色映射，后续新增颜色只需要在这里加键值对即可
$color-map: (
  red: red,
  green: green,
  blue: blue,
  yellow: yellow,
  // 也支持自定义类名和十六进制颜色，比如 primary: #165DFF
);

// 遍历生成所有颜色类
@each $class-suffix, $color-value in $color-map {
  &.#{$class-suffix} {
    --color: #{$color-value};
  }
}

// 后续正常使用变量即可
background-color: var(--color);

有几个注意点可以参考：

• 动态生成类名和变量值的时候，需要用 #{} 插值语法把 SCSS 变量转成 CSS 能识别的字符串，这就是你最开始写的 demo 里缺少的核心部分。
• 后续要加新的颜色类，只需要在 $color-map 里加一行键值对就行，不需要改动循环逻辑，维护成本很低。
• 你也可以根据需求拓展这个逻辑，比如同时生成文字颜色、边框颜色的规则，或者加透明度变体之类的，都可以直接在循环里修改实现。

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