如何在 Angular 和 Sass 中有效传播图形主题？

Question

场景：

我有一个应用程序，我想使用 3 种不同的图形主题。
为了传播我的主题，我使用了 3 个不同的类应用于我的根组件，
让我们调用这些类 .themeA、.themeB、.themeC .
对于每个主题，
我有一个 Sass 变量封装了我需要的所有颜色。

例如：

$themeAColors: (
    my-background-color: 'blue';
    my-color: 'green';
);

$themeBColors: (
    my-background-color: 'red';
    my-color: 'yellow';
);

$themeCColors: (
    my-background-color: 'white';
    my-color: 'black';
)

然后在我希望应用我的主题的每个子组件中，我使用以下模式：

@mixin subComponentStyle($theme) {
    .title {
       background-color: map-get($theme, my-background-color);
       color: map-get($theme, my-color);
    }
}

:host-context(.themeA) {
    @include subComponentStyle($themeAColors);
}

:host-context(.themeB) {
    @include subComponentStyle($themeBColors);
}

:host-context(.themeC) {
    @include subComponentStyle($themeCColors);
}

问题：

有没有办法避免或分解在每个子组件中使用 :host-context() 选择器并尊重组件样式封装？

更新： 谢谢，这有助于简化事情。现在我们想找到一种方法来避免在每个子组件中复制这个块：

@each $param in ($themeAColors, $themeBColors, $themeCColors) {
   $name: map-get($param, name);
   :host-context(#{ $name }) {
       @include subComponentStyle($param);
    }
}

理想情况下，我们希望将其替换为一个函数调用，该函数调用将接受任何 mixin 参数并应用它。所以在每个组件中，我们只需要使用正确的 mixin 来调用这个函数来处理主题。

Answer 1

Sass 混合多个主题和 :host-context

小心使用 :host-context 没有很多 support。

在使用 sass 玩了一会儿之后，我可以让它遍历主题列表吗？然后将主题传递给混音。
在循环中使用了名称变量，因此它可以在 css 规则定义中使用。

@mixin subComponentStyle($theme) {
  background-color: map-get($theme, my-background-color);
  color: map-get($theme, my-color);
}

$themeAColors: (
  name: ".themeA",
  my-color: 'blue',
  my-background-color: 'red',
);

$themeBColors: (
  name: ".themeB",
  my-color: 'white',
  my-background-color: 'black',
);

$themeCColors: (
  name: ".themeC",
  my-color: 'Orange',
  my-background-color: '#2a4',
);

@each $param in ($themeAColors, $themeBColors, $themeCColors) {
  $name: map-get($param, name);
  :host-context(#{ $name }) {
    @include subComponentStyle($param);
  }
}

这编译成这个css：

:host-context(.themeA) {
  background-color: "red";
  color: "blue";
}

:host-context(.themeB) {
  background-color: "black";
  color: "white";
}

:host-context(.themeC) {
  background-color: "#2a4";
  color: "Orange";
}

如何在 Angular 和 Sass 中有效传播图形主题？

How to propagate graphical theme efficiently in Angular with Sass?

sass

angular-material

angular

angular-material-theming

angular-material-6

Sass 混合多个主题和 :host-context