Javascript 如何映射和应用主题SCSS变量？

我有两个主题，希望创建一个mixin，根据应用于DOM主体的特定类循环并应用其中的每一个主题

假设我有两个主题：

   //_variables.scss
    $theme-good: (
       $font-size: 24px,
       $font-color: #333,
       $padding: 10px
    );
    $theme-bad: (
       $font-size: 14px,
       $font-color: #777,
       $padding: 20px
    );

我希望能够像这样应用它们：

body.theme--bad {
   @include theme-map($theme-bad)
}

或

有人能帮我调一下吗

我尝试过类似的方法，但得到了

错误：未定义变量“$font size”

// _mixins.scss
@mixin theme-map($theme: ()) {
  @each $key, $value in $theme {
    #{$key}: $value;
  }
}

我将它们全部导入到styles.scss中：

@import "variables";

@import "mixins/mixins";

@import "subtheme/good/subtheme";
@import "subtheme/bad/subtheme";

@import "variables";

@import "mixins/mixins";

@import "subtheme/good/subtheme";
@import "subtheme/bad/subtheme";