Html 通过附加另一个变量来生成动态SCSS变量

我正在尝试使用SCSS

@for

循环为相似的项目分配不同的颜色。我能否将

@for

循环中使用的

$I

变量附加到

$color-

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

---

我不知道动态变量名，但实现所需的标准方法是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;
}

---

我的答案对您来说足够好吗，或者您仍然关心动态变量名吗？是的，您的答案实现了我想要做的事情！SCSS列表是一个值得研究的好东西，谢谢。

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

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

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