Использовать многозначный цвет scss

Question

Я импортирую это scss file (colors.scss), которое содержит

$ white: #fff;

$ black: # 000;

$ mat-red: (50: #ffebee, 100: # ffcdd2, 200: # ef9a9a, 300: # e57373, 400: # ef5350, 500: # f44336, 600: # e53935, 700: # d32f2f, 800: # c62828, 900: #b71c1c, A100: # ff8a80, A200: # ff5252, A400: # ff1744, A700: # d50000, контрастность: (50: непрозрачность black-87, 100: непрозрачность black-87, 200: black-87-непрозрачность, 300: непрозрачность черного-87, 400: непрозрачность черного-87, 500: белый, 600: белый, непрозрачность 700, белый: непрозрачность: белый-87, 900: непрозрачность: белый-87,A100: черная непрозрачность $ 87, A200: белая, A400: белая, A700: белая,));

Когда я импортирую colors.scss, я использую $white или $blackработает отлично.Но когда я пытаюсь использовать $mat-red, как в этом примере

app-root {
    display: flex;
    justify-content: center;
    align-items: center;
    color: $mat-red;
  }  

, я получаю эту ошибку

Сборка модуля не удалась: $ mat-red: (50: #ffebee,100: # ffcdd2, 200: # ef9a9a, 300: # e57373, 400: # ef5350, 500: # f44336, 600: # e53935, 700: # d32f2f, 800: # c62828, 900: # b71c1c, A100: # ff8a80,A200: # ff5252, A400: # ff1744, A700: # d50000, контрастность: (50: непрозрачность black-87, 100: непрозрачность black-87, 200: непрозрачность black-87, 300: black- $ 300Непрозрачность 87, непрозрачность 400 $, непрозрачность 87, 500: белая, 600: белая, 700: белая, непрозрачность 100%, белая: 900: непрозрачность белая 87, A100: черная 87-непрозрачность, A200: белый, A400: белый, A700: белый,));^ (50: #ffebee, 100: # ffcdd2, 200: # ef9a9a, 300: # e57373, 400: # ef5350, 500: # f44336, 600: # e53935, 700: # d32f2f, 800: # c62828, 900: #b71c1c, A100: # ff8a80, A200: # ff5252, A400: # ff1744, A700: # d50000, контраст: (50: rgba (0, 0, 0, 0,87), 100: rgba (0, 0, 0, 0,87), 200: rgba (0, 0, 0, 0,87), 300: rgba (0, 0, 0, 0,87), 400: rgba (0, 0, 0, 0,87), 500: белый, 600: белый, 700:белый, 800: RGBA (255, 255, 255, 0,87), 900: RGBA (255, 255, 255, 0,87), A100: RGBA (0, 0, 0, 0,87), A200: белый, A400: белый, A700: white)) не является допустимым значением CSS.

Answer 1

Вы объявили карту цветов.Вам нужно получить нужный цвет по:

.color{
  color: map-get($mat-red, 50); // 50 as an example of key in $mat-red
}