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次以上。

我是否可以循环使用上述内容并按panel-1 1增加panel-2所以{{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;
    }
  }
}

希望它有所帮助。

问候。

使用Sass增加背景图像ID

1 个答案: