SCSS主题开发：如何通过循环为映射添加命名空间？

方案一：主题文件导出统一映射（推荐，结构清晰） #

先改造你的主题文件，让每个主题导出一个包含所有变量的映射，替代零散的单个变量：

// _themes/default.scss
$theme-map: (
  font-color: #333,
  font-family: Arial, sans-serif,
  font-size: 13px
);

@export $theme-map;

// _themes/client.scss
$theme-map: (
  font-color: #555,
  font-family: "Helvetica Neue", sans-serif,
  font-size: 14px
);

@export $theme-map;

然后在主SCSS文件里，通过主题列表+循环自动处理每个主题：

// 主SCSS文件
// 主题列表：键是页面上的主题类名，值是对应主题文件的路径
$themes: (
  default: './_themes/default',
  client: './_themes/client'
);

@each $theme-name, $theme-path in $themes {
  // 动态导入当前主题模块
  @use $theme-path as theme;
  
  body.#{$theme-name} {
    // 遍历主题映射里的所有变量，生成CSS自定义属性
    @each $var-name, $var-value in theme.$theme-map {
      --#{$var-name}: #{$var-value};
    }
  }
}

优势：

• 新增主题只需两步：新增一个导出$theme-map的主题文件，在$themes列表里加一行配置
• 变量结构集中，避免零散变量的混乱
• 完全规避命名空间插值的限制

方案二：兼容现有主题文件（无需修改原变量） #

如果不想改动现有的主题文件（保留单个$xxx-base变量），可以用SCSS的meta.module-variables()函数自动提取模块内的变量：

// 主SCSS文件
@use 'sass:meta';

// 主题列表
$themes: (
  default: './_themes/default',
  client: './_themes/client'
);

// 定义要提取的变量后缀（匹配你现有变量的命名规则）
$target-suffix: '-base';

@each $theme-name, $theme-path in $themes {
  @use $theme-path as theme;
  
  // 获取当前主题模块的所有变量
  $all-theme-vars: meta.module-variables(theme);
  
  body.#{$theme-name} {
    @each $full-var-name, $var-value in $all-theme-vars {
      // 过滤出带-target-suffix的变量
      @if str-index($full-var-name, $target-suffix) == str-length($full-var-name) - str-length($target-suffix) + 1 {
        // 去掉后缀，生成CSS变量名
        $css-var-name: str-slice($full-var-name, 1, str-length($full-var-name) - str-length($target-suffix));
        --#{$css-var-name}: #{$var-value};
      }
    }
  }
}

优势：

• 完全兼容现有主题文件，不需要修改任何原有变量
• 新增变量只要符合xxx-base的命名规则，就会自动被加入主题
• 新增主题同样只需在$themes列表里加一行配置

为什么你之前的尝试失败？ #

1. 命名空间插值不允许：SCSS的模块命名空间（比如default.）属于语法层面的固定标识，不支持#{$theme}.variable这种动态插值写法，因此会报错。
2. 字符串拼接无法解析变量：直接写$theme + "." + $name + "-base"只是拼接成纯文本，SCSS不会将其识别为变量名去解析，所以会输出字面量default.$font-size-base而非变量实际值。

以上两种方案都绕过了这两个问题，实现了主题变量的自动化生成。

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