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

【问题标题】：How can I use sass variables with @each and with hex colors?如何将 sass 变量与 @each 和十六进制颜色一起使用？
【发布时间】：2015-02-06 04:25:04
【问题描述】：

我正在制作带有一些色块的风格指南。 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-principle 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} 和其他类似的组合。这样做的正确方法是什么？

【问题讨论】：

为什么投反对票？这是两个截然不同的问题。因为我的颜色是没有# 前缀的十六进制值，所以这是一个独特的问题。如果我有red、green等语义颜色，我不会有问题，但问题是##冲突会导致各种编译错误。

标签： sass

【解决方案1】：

你必须引用它，然后取消引用它。请记住，当您执行此操作时，这些值不是颜色，并且不能用于任何颜色操作函数。

$colors: fafafa eaeaea 777 555 444; 

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

【讨论】：

【解决方案2】：

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

【讨论】：