无法在CSS中获取Material主题警告色，如何正确提取？

你遇到的问题是因为map-get($config, "warn")获取到的是完整的警告色调色板映射（包含50、100、500、A100等所有色调的键值对），直接将这个复杂映射插入CSS变量会导致Sass解析失败——CSS变量只接受单一的颜色值，无法处理这种嵌套结构。

正确的两种实现方式： #

方式1：直接从定义好的调色板提取主色调

你已经通过mat.define-palette定义了$my-warn，默认主色调是500（未指定时的默认值），可以用mat.get-color-from-palette()函数提取具体颜色：

:root {
  // 获取警告色的主色调（默认500）
  --my-warn: #{mat.get-color-from-palette($my-warn)};
  // 若需要特定色调，比如A400，可指定第二个参数：
  // --my-warn-accent: #{mat.get-color-from-palette($my-warn, A400)};
}

方式2：从已定义的主题中提取警告色

如果你想从$my-theme中获取，需要先拿到警告色调色板，再提取具体颜色：

$color-config: mat.get-color-config($my-theme);
$warn-palette: map-get($color-config, warn);
:root {
  --my-warn: #{mat.get-color-from-palette($warn-palette)};
}

或者使用Angular Material 12+提供的更简洁的mat.get-theme-color()函数：

:root {
  --my-warn: #{mat.get-theme-color($my-theme, 'warn')};
}

以上两种方式都能得到单一的十六进制颜色值，避免Sass解析错误，成功将警告色存入CSS变量。

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