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-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-opacity，A100：$ black-87-opacity，A200：白色，A400：白色，A700：白色，））;

当我导入colors.scss＆amp;我使用$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：$黑-87-不透明度，300：$ black-87-opacity，400：$ black-87-opacity，500：white，600：white，700：white，800：$ white-87-opacity，900：$ white- 87-不透明度，A100：$ black-87-opacity，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：白色））不是有效的CSS值。

Answer 1

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

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

使用多值颜色scss

1 个答案: