SASS:循环内部属性 [英] SASS: loop inside properties

问题描述

我想为一个属性生成多个值:

I want to generate multiple values for a single property:

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%);

我试图通过以下方法实现这一目标:

I tried to achieve this by doing this:

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

但是，这不起作用.任何帮助将不胜感激！

However, this doesn't work. Any help would be appreciated!

推荐答案

只需在所有逻辑之前声明一个变量，然后再使用它即可.

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

顺便说一句，您也可以使用 $ i 和 $ color#{$ i} 之类的颜色.

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

这篇关于SASS:循环内部属性的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！