通过追加另一个变量生成动态SCSS变量

Question

我正在尝试使用SCSS @for循环为相似的项目分配不同的颜色。是否可以将@for循环中使用的$i变量附加到$color-

<div>
  <h1>Hello</h1>
  <h1>World</h1>
  <h1>Goodbye</h1>
</div>

$color-1: red;
$color-2: blue;
$color-3: yellow;

@for $i from 1 to 3 {
  div>h1:nth-child(#{$i}) {
    color: $color-{$i};
  }
}

Answer 1

我不知道动态变量名，但实现所需内容的标准方法是SCSS列表，您可以通过它进行迭代。

$colors-list: red blue yellow;

@each $current-color in $colors-list {
    $i: index($colors-list, $current-color);
    div>h1:nth-child(#{$i}) { 
        color: $current-color;
    }
}

，它编译为

div > h1:nth-child(1) {
  color: red;
}

div > h1:nth-child(2) {
  color: blue;
}

div > h1:nth-child(3) {
  color: yellow;
}