如何将sass变量与@each和十六进制颜色一起使用？

我正在用一些色块做一个风格指南。HTML如下所示：

<div class="colorBlock _fafafa">Light Gray (#fafafa)</div>  
<div class="colorBlock _eaeaea">Gray (#eaeaea)</div>  
<div class="colorBlock _777">Meta-Gray (#777)</div>  
<div class="colorBlock _555">Gray 5 (#555)</div>  
<div class="colorBlock _444">Gray 4 (#444)</div>  
<div class="colorBlock _333">Gray 3 (#333)</div>  

所以我正在尝试列表和

@每个
。以下是我尝试过的：

$colors: fafafa eaeaea 777 555 444; 

.colorBlock { 
    @each $color in $colors { 
        &._#{$color} { 
            background-color: ##{$color}; 
        } 
    } 
}

这会起作用，但Sass不喜欢
##{$color}
，编译失败。我尝试了
\\\\\\{$color}
，它成功地编译了，但打印了
\\\\\fafafa
。我还尝试了
#$color
，但编译时也失败了（
在“…kground color:”：预期表达式（例如1px，粗体）之后的CSS无效，为“#$color；”
）。我还尝试了
{{+$color}
和其他类似的组合。正确的方法是什么
 你必须引用它，然后取消引用。请记住，执行此操作时，这些值不是颜色，不能用于任何颜色操纵函数

$colors: fafafa eaeaea 777 555 444; 

.colorBlock { 
    @each $color in $colors { 
        &._#{$color} { 
            background-color: unquote('##{$color}'); 
        } 
    } 
}

我使用了一些字符串连接：
background color:#{'#'+$color}。事实证明，我还必须引用列表中有前导零的颜色：
$colors:fafafaeaeaea7775555444'07d'
 为什么要投否决票？这是两个截然不同的问题。由于我的颜色是十六进制值，没有前缀
#
，这是一个独特的问题。如果我有像
红色
，
绿色
等语义颜色，我就不会有问题，但问题是
##
冲突会导致各种编译错误。
$colors: fafafa eaeaea 777 555 444; 

.colorBlock { 
    @each $color in $colors { 
        &._#{$color} { 
            background-color: unquote('##{$color}'); 
        } 
    } 
}