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

如何解决通过附加另一个变量生成动态 SCSS 变量

我正在尝试使用 SCSS @for 循环为相似的项目分配不同的颜色。我可以将 $i 循环中使用的 @for 变量附加到 $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};
  }
}

解决方法

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