SCSS多值颜色变量$mat-red直接使用报错问题咨询

你遇到的问题很明确：$mat-red不是一个单一的颜色值，而是一个Sass映射（map）——它包含了不同深浅的红色调（50到900、A100到A700），以及每个色调对应的对比色配置。CSS无法识别这种复合的结构化数据，所以直接把它赋值给color属性就会抛出"不是有效CSS值"的错误。

解决步骤：用map-get()提取具体颜色 #

Sass提供了map-get()函数，可以从映射中取出指定键对应的值。你只需要指定要获取的色调（比如500，这是Material Design的标准主色调），就能拿到对应的十六进制颜色值：

app-root {
  display: flex;
  justify-content: center;
  align-items: center;
  // 获取mat-red的标准500色调
  color: map-get($mat-red, 500);
}

如果需要使用某个色调对应的对比色（比如深色背景上的白色文字），可以嵌套使用map-get()：

// 获取mat-red 900色调对应的对比色（这里是带87%透明度的白色）
color: map-get(map-get($mat-red, contrast), 900);

额外提示 #

所有Angular Material的主题颜色变量（比如$mat-blue、$mat-green）都是这种映射结构，如果你需要直接使用单一颜色，都得通过map-get()来提取对应色调的值。你可以根据UI需求选择不同的色调编号，比如用100做浅背景，700做强调文字等。

内容的提问来源于stack exchange，提问作者Melchia