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

如何在@each和hex颜色中使用sass变量？

2 个答案: