具有多个主题和：host-context的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

具有多个主题和：host-context的Sass混合

请注意，使用：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";
}

如何使用Sass在Angular中有效地传播图形主题？

1 个答案:

具有多个主题和：host-context的Sass混合