Question

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

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

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

测试： https://sass.js.org/

有一些方法可以生成具有正确代码的代码，以获取SASS和OUTPUT中的值

Answer 1

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

此外，在这些情况下，您可以使用@each $colorGrays in $colors代替@for

Sass变量不适用于

1 个答案: