SASS：循环内部属性

Question

我想为单个属性生成多个值：

background-image:
    radial-gradient(circle, $primary 10%, transparent 10%),
    radial-gradient(circle, $primary 10%, transparent 10%),
    radial-gradient(circle, $primary 10%, transparent 10%),
    radial-gradient(circle, $primary 10%, transparent 10%);

我试图通过这样做来实现这一目标：

background-image:
    @for $i from 1 to 5 {
        radial-gradient(circle, $primary 10%, transparent 10%),
    }

然而，这不起作用。任何帮助，将不胜感激！

Answer 1

Just declare a variable before and use it after all your logic.

BTW, you can play also with the $i and colors like $color#{$i}.

.gradient{
  $color1: #000;
  $color2: #fff;
  $background: null;

  @for $i from 1 through 4 {
      $background: $background radial-gradient(circle, $color1 10%, $color2 10%)#{if($i !=4, ',', '')};
  }

  background-image: $background;
}