SASS中如何为映射生成的类创建别名？扩展语法咨询

你现有的Sass映射循环代码如下：

@each $color, $value in $theme-colors {
  .old-name-#{$color} {
      color: $value;
  }
}

你希望保留所有.old-name-*开头的类，同时生成一套.new-name-*的别名类。单个类的继承你知道可以这么写：

.new-name { 
  @extend .old-name;
}

但不确定针对映射批量生成的类该怎么写扩展，你尝试的写法是：

.new-name-#($color) { 
  @extend .old-name-#($color);
}

结论：你写的代码有语法错误，正确写法如下 #

你用错了插值语法，Sass里的变量插值应该是#{$变量名}，而不是#($变量名)，而且需要把扩展逻辑放进@each循环里才能批量生成别名类。

方法一：分开循环生成

先保留原有的旧类生成逻辑，再新增循环生成别名类：

// 生成旧类
@each $color, $value in $theme-colors {
  .old-name-#{$color} {
      color: $value;
  }
}

// 生成新别名类（通过@extend继承旧类样式）
@each $color in map-keys($theme-colors) {
  .new-name-#{$color} {
    @extend .old-name-#{$color};
  }
}

方法二：合并循环（更简洁高效）

直接在同一个循环里同时定义新旧类，让它们共享样式规则，这种方式编译后的CSS体积更小，不需要额外的继承选择器：

@each $color, $value in $theme-colors {
  .old-name-#{$color},
  .new-name-#{$color} {
      color: $value;
  }
}

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