通过附加另一个变量生成动态 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;
}

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

Generate a dynamic SCSS variable by appending another variable

html

css

sass

dynamic-variables