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

上进行测试

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

1 个答案: