使用SCSS Mixins进行主题设置有时可能无法正常工作

Question

我正在尝试使用SCSS mixins为Angular App设置主题。 我使用下面的函数在主体上拆分类，以检测活动主题。

@mixin themed() {
  @each $theme, $map in $themes {
    .theme_#{$theme} & {
      $theme-map: () !global;
      @each $key, $submap in $map {
        $value: map-get(map-get($themes, $theme), "#{$key}");
        $theme-map: map-merge(
          $theme-map,
          (
            $key: $value,
          )
        ) !global;
      }
      @content;
      $theme-map: null !global;
    }
  }
}

我按如下方式使用此功能。

.custom_overlay {
  position: fixed;
  top: 0px;
  left: 0px;
  z-index: 15;
  width: 100%;
  height: 100%;

  @include themed() {
    background-color: t(background_base);
  }

  h2,
  p,
  span {
    @include themed() {
      color: t(text_darker);
    }
  }
}

问题在于该函数有时有效，有时却无效。 在上面的示例中，应用了颜色，但是完全忽略了背景色。

一些建议如何解决？