loops - 如何在属性中模仿 sass for 循环？

Question

这个问题已经有答案了:

Multiple values for one property with variable argument lists in Sass (1 个回答)

已关闭 8 年前。

我有一些非常重复的 css，我希望 sass 能够简化它们。本质上，我有一系列项目，它们根据其级别具有多个背景条纹。我使用背景渐变来创建这些条纹。我尝试在背景图像属性中使用 for 循环，但显然这是 Not Acceptable sass。这是我尝试做的一个非常简单的例子。

关于如何绕过这个 for 循环限制有什么想法吗？

.master {
    @for $i from 1 through 10 {

    .item-#{$i} {
        background-image:
            @for $j from 1 through $1 {
                linear-gradient(90deg, red 7px, #fff 1px),
            }
            linear-gradient(#fff 1px, rgba(255, 255, 255,.0) 1px);
            }
    }
}

期望的结果:

.master .item-1 {
    background-image:
        linear-gradient(90deg, red 7px, #fff 1px),
        linear-gradient(#fff 1px, rgba(255, 255, 255,.0) 1px);
}

.master .item-2 {
    background-image:
        linear-gradient(90deg, red 7px, #fff 1px),
        linear-gradient(90deg, red 7px, #fff 1px),
        linear-gradient(#fff 1px, rgba(255, 255, 255,.0) 1px);
}

.master .item-3 {
    background-image:
        linear-gradient(90deg, red 7px, #fff 1px),
        linear-gradient(90deg, red 7px, #fff 1px),
        linear-gradient(90deg, red 7px, #fff 1px),
        linear-gradient(#fff 1px, rgba(255, 255, 255,.0) 1px);
}

etc...

.master .item-10 {
    background-image:
        linear-gradient(90deg, red 7px, #fff 1px),
        linear-gradient(90deg, red 7px, #fff 1px),
        linear-gradient(90deg, red 7px, #fff 1px),
        linear-gradient(90deg, red 7px, #fff 1px),
        linear-gradient(90deg, red 7px, #fff 1px),
        linear-gradient(90deg, red 7px, #fff 1px),
        linear-gradient(90deg, red 7px, #fff 1px),
        linear-gradient(90deg, red 7px, #fff 1px),
        linear-gradient(90deg, red 7px, #fff 1px),
        linear-gradient(90deg, red 7px, #fff 1px),
        linear-gradient(#fff 1px, rgba(255, 255, 255,.0) 1px);
}

Answer 1

尝试这个方法

.master {
  @for $i from 1 through 10 {

    $lg : "";
    @for $j from 1 through $i {
      $lg : $lg + "linear-gradient(90deg, red 7px, #fff 1px), ";
    }

    .item-#{$i} {
      background-image: #{$lg}linear-gradient(#fff 1px, rgba(255,255,255,.0) 1px);
    }
  }
}

您可以在sassmeister上进行测试