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

Question

I'm trying to assign different colors to similar items using an SCSS @for loop. Can I append the $i variable used in the @for loop to $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

I don't know about dynamic variable names, but the standard way to achieve what you want is SCSS lists, over which you can iterate.

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

which compiles to

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

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

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