Why can't Sass find the element of my color lo

问题:

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');

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.

回答1:

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).

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%));