Sass变量不适用于

我在将字符串转换为变量时遇到问题，因为它会生成错误

为了获得类中的颜色，我尝试了几种方法将这个变量转换成一行

c-gray + $i

SASS

$c-gray1: #666;
$c-gray2: #979797;
$c-gray3: #4c4c4c;
$c-gray4: #b9c6d1;
$c-gray5: #f7f8f9;

@for $i from 1 through 5 {

  $colorsGrays: c-gray + $i;
  $count: 1;
  @each $color in $colorsGrays {
    .gBgcGray#{$i} {
      background-color: $color;
    }

    .gCGray#{$i} {
      color: $color;
    }

    .g-bc--gray#{$i} {
      border-color: $color;
    }

    $count: $count + 1;
  }
}

输出：

.gBgcGray1 {
  background-color: c-gray1;
}

.gCGray1 {
  color: c-gray1;
}

.g-bc--gray1 {
  border-color: c-gray1;
}

.gBgcGray2 {
  background-color: c-gray2;
}

.gCGray2 {
  color: c-gray2;
}

.g-bc--gray2 {
  border-color: c-gray2;
}

.gBgcGray3 {
  background-color: c-gray3;
}

.gCGray3 {
  color: c-gray3;
}

.g-bc--gray3 {
  border-color: c-gray3;
}

.gBgcGray4 {
  background-color: c-gray4;
}

.gCGray4 {
  color: c-gray4;
}

.g-bc--gray4 {
  border-color: c-gray4;
}

.gBgcGray5 {
  background-color: c-gray5;
}

.gCGray5 {
  color: c-gray5;
}

.g-bc--gray5 {
  border-color: c-gray5;
}

测试：

---

有一种方法可以生成具有正确代码的代码，以获取SASS中的值，并且输出

SASS无法以这种方式解析变量，但您可以使用列表或映射并解析颜色：

使用列表：

$c-gray: #666 #979797 #4c4c4c #b9c6d1 #f7f8f9;
@for $i from 1 through 5 {
  $colorsGrays: nth($c-gray, $i);
}

使用地图：

$colors: (
  c-gray1: #666,
  c-gray2: #979797,
  c-gray3: #4c4c4c,
  c-gray4: #b9c6d1,
  c-gray5: #f7f8f9,
);

@for $i from 1 through 5 {
  $colorsGrays: map-get($colors, c-gray + $i);
}

此外，在这些情况下，您可以在$colors中使用

@每个$COLORGREY，而不是
@for