css - Mix two SASS variables inside a loop -

this question has answer here:

• creating or referencing variables dynamically in sass 5 answers

i have few scss variables looks :

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

i want use these variables inside for, :

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

after compiling code error : syntax error: undefined variable: "$box-bg", looks #{$i} variable not make sense code. there way use variable inside loop this?

note : use compass

sass not support variable variables. programatically create selectors, have using lists:

$box-bg: #7a8360, #918261, #6a8177, #686f5e;  @for $i 1 through length($box-bg) {   .locationbox:nth-child(#{$i}) { background: nth($box-bg, $i); } } 

output:

.locationbox:nth-child(1) {   background: #7a8360; }  .locationbox:nth-child(2) {   background: #918261; }  .locationbox:nth-child(3) {   background: #6a8177; }  .locationbox:nth-child(4) {   background: #686f5e; }