Sass如何通过列表循环重构重复样式 变量名插值是否可行

完全可以实现，Sass本身不支持直接对变量名做插值，我们可以用 Map（键值映射） 结构来绕开这个限制，重构后代码会非常简洁，而且后续维护成本极低。

实现步骤 #

1. 先定义颜色映射表
   你可以直接在当前文件定义和类后缀一一对应的颜色映射，不需要修改原有g模块的变量定义：

$heading-color-map: (
  orange: g.$orange,
  teal: g.$teal,
  dark-teal: g.$dark-teal,
  light-blue: g.$light-blue,
  dark-blue: g.$dark-blue,
  dark-gray: g.$darker-gray
);

2. 用@each遍历映射生成所有类
   遍历的时候直接把Map的键插值到类名里，值直接作为属性值使用即可：

@each $suffix, $bg-color in $heading-color-map {
  .box-heading_#{$suffix} {
    background-color: $bg-color;
  }
}

效果说明 #

上述代码编译后生成的CSS和你原来手写的完全一致，后续如果要新增同规则的样式类，只需要在$heading-color-map里加一行对应的键值对即可，不需要重复写类结构。

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