Css 在一个循环中混合两个SASS变量

我有几个scss变量，看起来像：

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

我想在for中使用这些变量，比如：

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

编译代码后，我得到以下错误：语法错误：未定义变量“$box bg”，它看起来像是

{$i}

变量对我的代码没有任何意义。 有没有办法在这样的循环中使用变量

---

注意：我也使用compass，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;
}

---

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;
}