Incrementing a background-image ID with Sass [dupl

Question

This question already has an answer here:

• Extract body class for use in Scss 1 answer

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;
    }
}

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

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

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

Answer 1

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;
    }
  }
}

Hope it helps.

Regards.