使用 Sass 增加背景图像 ID [英] Incrementing a background-image ID with Sass

问题描述

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

I have a class which displays a background image:

@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)

The problem I have is that I have roughly 30 images (img-1.png to img-30.png)

不写以上30遍怎么能省.

How can I save not having to write the above 30 times.

我可以遍历上面的内容并将 panel-1 增加 1 所以 panel-2 吗?

Can I loop through the above and increment panel-1 by 1 so panel-2?

推荐答案

你可以使用@for look:

You can use @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的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！