使用Sass递增背景图像ID

Question

我有一个显示背景图像的类：

@media all and (min-width: 31.25em) {
    .switch-image {
        display:block;
        background-image: url(/asset/img/img-1.png);
        background-repeat: no-repeat;
        background-position: center;
    }
}

我的问题是我有大约30张图片(从img-1.png到img-30.png)

我怎么才能省去不用写上面的30次呢？

我可以遍历上面的代码并通过1和panel-2递增panel-1吗？

Answer 1

你可以使用@for look：

@media all and (min-width: 31.25em) {
  @for $i from 1 through 30 {
    .switch-image-#{$i} {
      display:block;
      background-image: url(/asset/img/img-#{$i}.png);
      background-repeat: no-repeat;
      background-position: center;
    }
  }
}

希望能有所帮助。

致以问候。