为什么 Sass 找不到我的颜色查找映射的元素? [英] Why can't Sass find the element of my color lookup mapping?

问题描述

我不明白为什么 map-get 没有返回预期的结果:

I can't figure out why map-get does not return the expected results:

$buttonColors: (blue: lighten(blue, 25%), grey: lighten(gray, 40%));

@debug map-get($buttonColors, 'blue');

出于某种原因，当我期望它返回 #8080ff 时，它返回了 null.这会导致我的代码出现问题，因为我无法将空值传递给 lighten 或 darken 等函数.

For some reason, this is returning null when I'm expecting it to return #8080ff. This causes problems further down in my code because I can't pass a null value into functions like lighten or darken.

推荐答案

当您告诉 Sass 查找具有字符串作为其键的元素时，您的映射对其键使用颜色.颜色 blue 与字符串 'blue' 不同.结果，查找失败并且map-get() 函数返回NULL.HTML/CSS 规范中定义的所有颜色关键字都具有 color 类型，除非您引用它们(或通过插值将它们转换为字符串).

Your mapping uses colors for its keys while you're telling Sass to look for an element that has a string for its key. The color blue is not the same as the string 'blue'. As a result, the lookup fails and the map-get() function returns NULL. All color keywords defined in the HTML/CSS specification have the type of color unless you quote them (or turn them into strings via interpolation).

您可以停止将 map-get 的第二个参数转换为字符串，但如果您只是切换到始终使用字符串作为映射的键会更好(使用其他任何东西只会导致混淆和/或错误).

You could just stop turning the second argument to map-get into a string, but it would be better if you just switched to always using strings for the keys of your mappings (using anything else just causes confusion and/or bugs).

$buttonColors: ('blue': lighten(blue, 25%), 'grey': lighten(gray, 40%));

这篇关于为什么 Sass 找不到我的颜色查找映射的元素?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！