一個循環內混合兩種SASS變量

Question

我有幾個SCSS變量，它看起來像：

$box-bg1: #7a8360; 
$box-bg2: #918261; 
$box-bg3: #6a8177; 
$box-bg4: #686f5e; 

我想用這些變量裏面的，如：

@for $i from 1 through 4 { 
    .locationBox:nth-child(#{$i}) { background: $box-bg#{$i}; } 
} 

編譯代碼我得到後此錯誤：語法錯誤：未定義的變量：「$ box-bg」，看起來像#{$i}變量對我的代碼沒有任何意義。 有沒有辦法在這樣的循環內使用變量？

注意：我也使用指南針

Answer 1

Sass不支持變量變量。以編程方式創建你的選擇，你將不得不使用列表來做到這一點：

$box-bg: #7a8360, #918261, #6a8177, #686f5e; 

@for $i from 1 through length($box-bg) { 
    .locationBox:nth-child(#{$i}) { background: nth($box-bg, $i); } 
} 

輸出：

.locationBox:nth-child(1) { 
    background: #7a8360; 
} 

.locationBox:nth-child(2) { 
    background: #918261; 
} 

.locationBox:nth-child(3) { 
    background: #6a8177; 
} 

.locationBox:nth-child(4) { 
    background: #686f5e; 
}