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

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

0 голосов
/ 04 октября 2018

Сценарий:

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

1 Ответ

0 голосов
/ 05 ноября 2018

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

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

Поработав некоторое время с 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";
}
...