Sass mixin color-name compiling issue - colors

Question

I've just wrote a mixin supposed to display an #2x icon version for retina display.
First, here is an example of an icon name :
images/icon/close-black.png
images/icon/close-black#2x.png
Here is the mixin :
#mixin background-image-retina($type, $file, $color, $ext) {
background-image: url('src/assets/images/' + $type + '/' + $file + '-' + $color + '.' + $ext);
#media only screen and (-webkit-min-device-pixel-ratio: 2),
only screen and (-moz-min-device-pixel-ratio: 2),
only screen and (-o-min-device-pixel-ratio: 2/1),
only screen and (min-device-pixel-ratio: 2),
only screen and (min-resolution: 192dpi),
only screen and (min-resolution: 2dppx){
& {
background-image: url('src/assets/images/' + $type + '/' + $file + '-' + $color + '#2x.' + $type);
}
}
}
So I call my mixin :
#include background-image-retina(icon, close, black, png);
And here the result, and here is the problem :
background-image: url(src/assets/images/icon/close-#000.png);
My question :
Does anyone know how to specify the icon color without compiling it in an actual HEX color?
Thanks for your help!
A/W
[EDIT: SOLUTION FOUND]
To avoid color-like names compilation in your mixin, just add quotation marks around it.
black -> #000
"black" -> black

Answer 1

I think you might have an old version of SASS. Surrounding colors in strings is fine, but it's unnecessary. Also if you interpolate the value, even in older versions, I think it will fix your issue; plus it's shorter and easier to follow. I made you a sassmeister with both; comparing interpolated and non-interpolated variables in a newer version of SASS. But here's basically what I'm saying:
#mixin background-image-retina($type, $file, $color, $ext) {
background-image: url('src/assets/images/#{$type}/#{$file}-#{$color}.#{$ext}');
#media only screen and (whatevs) {
& {
background-image: url('src/assets/images/#{$type}/#{$file}-#{$color}#2x.#{$type}');
}
}
}
.hey { #include background-image-retina(icon, close, black, png); }