變量在觸控筆中的循環

Question

我想爲按鈕顏色製作混合。我的目標是遍歷值列表（綠色，紅色，藍色），然後構建類名稱，然後將正確的變量顏色應用於背景。

我已成功地走到這一步：

green = #38ab0b 
red = #ab130b 
blue = #099aab 

colors = green, red, blue 

for color, i in colors 
    .btn-{color} 
    background: mix(color, white, 60%) 
    &:hover 
     background: lookup(color) 

但是呈現出如：

.btn-color { 
    background: ; 
} 
.btn-color:hover { 
    background: #008000; 
} 
.btn-color { 
    background: ; 
} 
.btn-color:hover { 
    background: #f00; 
} 
.btn-color { 
    background: ; 
} 
.btn-color:hover { 
    background: #00f; 
} 

這example類似於我想這樣做，除了它不需要什麼變數有沒有一種方法可以實現我想要的，我知道如何在SCSS中做到這一點，但我正在嘗試做出改變。編輯：

我試過以下，但不能讓它工作。背景很好，但類名不會生成。

$green = #38ab0b 
$red = #ab130b 

colors = green $green, red $red 

for pair in colors 
    .btn-{pair[0]} 
    background: pair[1] 

Answer 1

您的例子不工作，因爲​​，red和blue已經顏色（與RGBA值的節點）。爲了解決這個問題，你可以使用字符串作爲列表鍵：

$green = #38ab0b 
$red = #ab130b 

colors = 'green' $green, 'red' $red 

for pair in colors 
    .btn-{pair[0]} 
    background: pair[1] 

您也可以使用（此任務更好的方法）散列：

colors = { 
    green: #38ab0b 
    red: #ab130b 
    blue: #099aab 
} 

for name, color in colors 
    .btn-{name} 
    background: mix(color, white, 60%) 
    &:hover 
     background: color