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

UPDATE：在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; }
}

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

1 个答案: