Sass动态创建map时报错“("primary": #0075dd !important...)不是有效CSS值”

问题根源 #

报错由两个核心原因导致：

1. 你定义的$primary、$secondary、$sucess基础颜色变量自带了!important修饰符，Sass内置的颜色转换函数无法识别带!important的颜色值
2. 你可能直接将$map-theme-colors-rgb这个Sass Map类型变量直接当作普通颜色值输出到CSS中，Map本身不是合法CSS属性值，必须通过key取对应值使用
   另外存在一个拼写错误：sucess应为success，虽不是当前报错的直接原因，也建议修正

解决步骤 #

1. 移除基础变量的!important修饰符：!important仅需要写在最终CSS属性定义的位置，不要加在变量定义阶段
2. 修正Map使用方式：调用$map-theme-colors-rgb时必须通过map.get方法取对应key的颜色值
3. 按需修正拼写错误

修改后代码示例 #

_variables.scss

// 基础变量移除!important
$primary: #0075dd !default;
$secondary: #6b7a93 !default;
$success: #1eaf3e !default; // 修正拼写

$map-theme-colors: (
  "primary":    $primary,
  "secondary":  $secondary,
  "success":    $success
) !default;

$map-theme-colors-rgb: create-map($map-theme-colors, convert-to-rgb, "value") !default;

实际调用示例

.btn-primary {
  // 必须通过key取Map中的值，需要!important加在属性末尾即可
  background-color: map.get($map-theme-colors-rgb, "primary") !important;
}

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