SCSS颜色映射中程序化加深已有颜色值的实现问题

这问题我之前也碰到过，你的写法主要有两个问题：一是插值语法用错了，二是在定义映射的过程中直接引用自身未完全解析的键值对，导致SCSS无法正确获取颜色值。下面给你两种可行的解决思路：

方法一：先单独定义颜色变量（推荐，可读性更高） #

把'f'对应的颜色先抽成独立变量，之后不管是在映射里使用还是加深处理，都直接调用这个变量即可，完全避免映射内部引用的问题：

// 先单独定义f对应的基础颜色
$color-f: orange;

$color-map: (
  'b': #000,
  'f': $color-f,
  's': darken($color-f, 50%) // 直接基于变量加深，语法完全合法
);

方法二：先定义基础映射，再合并扩展 #

如果不想单独抽变量，可以先定义不含s的基础颜色映射，再通过map-merge方法添加s对应的加深颜色——这时候基础映射已经完成解析，就能正常用map-get获取'f'的值了：

// 先定义基础颜色映射
$color-map: (
  'b': #000,
  'f': orange
);

// 合并添加加深后的's'颜色
$color-map: map-merge($color-map, (
  's': darken(map-get($color-map, 'f'), 50%)
));

为什么原来的写法会报错？ #

你写的darken(#{f}, 50%)有两个关键错误：

• #{f}是SCSS的插值语法，但这里的f不是变量，是映射的键名，这种写法完全无效；
• 在定义$color-map的过程中，SCSS还没完成整个映射的解析，没法直接获取内部'f'对应的值，自然无法执行darken函数。

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