1

设想 ：

  • 我有一个应用程序，它喜欢使用 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 调用这个函数来处理主题。

4

1 回答 1

0

具有多个主题和 :host-context 的 Sass mixin

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

在玩了一段时间的 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";
}
于 2018-11-05T16:48:57.837 回答