Как эффективно распространять графическую тему в Angular с помощью Sass?

Question

Сценарий:

• У меня есть приложение, которое в Id хотел бы использовать 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);
    }
}

В идеале, мы хотели бы заменить это вызовом функции, который будет принимать любой миксин в параметре и применять его. Таким образом, в каждом компоненте нам просто нужно вызывать эту функцию с нужным миксином для обработки их тем.

Answer 1

Sass mixin с несколькими темами и:host-context

Будьте осторожны с использованием :host-context не имеет большой поддержки.

Поработав некоторое время с sass, могу ли я перебрать список тем. Темы затем передаются на микширование.
Использовал переменную name в цикле, чтобы ее можно было использовать в определении правила 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";
}