Sass中如何为map-get返回的颜色值拼接数字生成合法十六进制颜色

你遇到的问题是因为Sass中字符串和色值类型拼接后会默认生成带引号的字符串类型，直接用以下方法即可得到不带引号的合法色值：

方案1：使用unquote()强制移除引号 #

将拼接后的整体传入unquote()函数，即可去掉编译结果的引号：

color: unquote(map-get(map-get($valuemap, $key), color) + "90");

方案2：使用插值语法拼接（更简洁） #

通过#{}插值语法直接拼接色值和透明度后缀，Sass处理插值时不会额外添加引号：

$base-color: map-get(map-get($valuemap, $key), color);
color: #{$base-color}90;

方案3：使用内置色值函数处理透明度（更规范） #

如果你的本质需求是给色值添加90对应的alpha通道，直接用Sass内置的color.change()方法，完全避免字符串拼接的问题：

$base-color: map-get(map-get($valuemap, $key), color);
// 十六进制90对应十进制透明度为 90 / 255 ≈ 0.35
color: color.change($base-color, $alpha: 0.35);

如果需要输出十六进制格式的带透明度色值，可以配合Sass的输出配置调整，最终编译结果都是不带引号的合法CSS属性值。

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