S CSS итерация цветовых палитр и генерация HTML разметки в angular - PullRequest
Новая
       20

S CSS итерация цветовых палитр и генерация HTML разметки в angular

0 голосов
/ 11 февраля 2020

Я хотел бы знать, как читать файл S CSS, который имеет angular материал-тему, подобную цветовой палитре. Исходя из количества цветов, я должен генерировать разметку HTML случайным образом с тем же цветом, что и фон. 

color-palettes.scss:
*********************

$palettes: add-contrasts(
  (
    blues: (
      50: #ccecf8, 
      100: #c2deea, 
      200: #5eb6e4, 
      300: #1cc1ff,
      400: #00b7fd
    ),
    reds: (
      50: #f9ccd6, 
      100: #ff9eb4,
      200: #ff6689,
      300: #ff1e52,
      400: #ff003b,
      500: #e00034, 
      600: #c1002d,
      700: #a30026
  )
  )
);

$primary :  mat-palette(map_get($palettes, blues));
$warn: mat-palette(map_get($palettes, reds));

add-contrasts is a function to add contrast automatically to each palette

Я пытался перебрать все цвета, доступные в $ palettes, но он не работает должным образом. 

@each $color-theme, $color-brand in $palettes {
  @each $color-key, $color-value in $color-brand {
      background-color: $color-value
  }
 }

Есть ли способ или подход, который я могу использовать для визуализации всех цветов на странице HTML.

...