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

Question

我正在用一些色块制作一个风格指南。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>  

我想写一些DRY原理的SASS，编译成这个CSS:

.colorBlock._fafafa { 
    background-color: #fafafa; 
} 
.colorBlock._eaeaea { 
    background-color: #eaeaea; 
} 
...

所以我正在尝试列表和@each。以下是我尝试过的：

$colors: fafafa eaeaea 777 555 444; 
.colorBlock { 
    @each $color in $colors { 
        &._#{$color} { 
            background-color: ##{$color}; 
        } 
    } 
}

这是可行的，但Sass不喜欢##{$color}，并且在编译时失败。我尝试了##{$color}，它成功地编译了，但打印了#fafafa。我也尝试过#$color，但在编译（Invalid CSS after "...kground-color: ": expected expression (e.g. 1px, bold), was "#$color; "）时也失败了。我还尝试了#{# + $color}和其他类似的组合。做这件事的正确方法是什么？

Answer 1

您必须先引用它，然后再取消引用。请记住，当您这样做时，这些值不是颜色，不能在任何颜色操作函数中使用。

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

Answer 2

我使用了一些字符串连接：background-color: #{'#' + $color};。事实证明，我还必须引用列表中以零开头的颜色：$colors: fafafa eaeaea 777 555 444 '07d';。