我如何在房产中模仿sass for loop？

Question

我有一些非常重复的CSS,我希望sass能够简化.基本上我有一系列的项目,根据他们的水平有一些背景条纹.我正在使用背景渐变来创建这些条纹.我试图在我的background-image属性中使用for循环,但显然这是不可接受的sass.这是我试图做的一个非常简单的例子.

关于如何绕过这个循环限制的任何想法？

.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上测试它