使用多值颜色 scss

Posted 2023-03-07

【中文标题】使用多值颜色 scss

【英文标题】：Use multiple value color scss

【发布时间】：2018-11-04 23:51:57

【问题描述】：

我正在导入这个scss file (colors.scss)，其中包含

$white: #fff;

$黑色：#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-opacity, 100: $black-87-opacity, 200: $black-87-opacity, 300: $black-87-opacity, 400: $black-87-opacity, 500: 白色, 600: 白色, 700: 白色, 800: $white-87-opacity, 900: $white-87-opacity, A100: $black-87-opacity, 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-opacity, 100: $black-87-opacity, 200: $ black-87-opacity, 300: $black-87-opacity, 400: $black-87-opacity, 500: white, 600: white, 700: white, 800: $white-87-opacity, 900: $white- 87-不透明度，A100：$black-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 值。

【问题讨论】：

很简单：值无效...

【参考方案1】：

你已经声明了一张颜色图。您需要通过以下方式检索所需的颜色：

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