variables - 如何使用 for 循环增加 Scss 中的变量？

Question

很确定这对于 Sass/Scss 是不可能的，但想确定这是 Sass 的限制，而不是我自己对语法的误解......

我正在尝试创建一个样式列表，其中每个列表项都从一堆变量中获得不同的颜色：

$color1: #FF0000; // Red
$color2: #FFBF00; // Orange
$color3: #FFFF00; // Yellow
$color4: #7FFF00; // Green
$color5: #007FFF; // Light Blue
$color6: #00FFFF; // Cyan
$color7: #0000FF; // Blue
$color8: #7F00FF; // Purple
$color9: #FF00FF; // Magenta

@for $i from 1 through 9 {
a[href^="link#{$i}"] { color: $color#{$i};
}
}

但是，Sass 不会编译。我认为不可能以这种方式增加变量名。任何人都可以确认吗？

Answer 1

您不能以动态方式创建变量名称，但您可以通过更好的语义和灵活性来实现这一点：

$red        : #FF0000;
$orange     : #FFBF00;
$yellow     : #FFFF00;
$green      : #7FFF00;
$lightblue  : #007FFF;
$cyan       : #00FFFF;
$blue       : #0000FF;
$purple     : #7F00FF;
$magenta    : #FF00FF;

$colors: $red $orange $yellow $green $lightblue $cyan $blue $purple $magenta;

@each $color in $colors {
  $i: index($colors, $color);
  a[href^="link#{$i}"] { color: $color; }
}

更新：在 Sass 3.3 中，您可以使用映射来减少重复。

$colors: (
  red        : #FF0000,
  orange     : #FFBF00,
  yellow     : #FFFF00,
  green      : #7FFF00,
  lightblue  : #007FFF,
  cyan       : #00FFFF,
  blue       : #0000FF,
  purple     : #7F00FF,
  magenta    : #FF00FF,
);

@each $name, $color in $colors {
  a[href^="link#{$name}"] { color: $color; }
}