如何使用scss根据不同图片生成不同样式类？

Question

我有一个这样的问题，我的后台管理系统的菜单的icon是可以配置的，我的做法是把所有的icon图片放在某个文件夹下面，这些图片的名字分别是1.svg、2.svg、3.svg....以此类推，然后我在前端分别根据不同的图片写出不同的css类，类型下面的代码：

.icon-1 {
  background-image: url('../assets/pub/menu/1.svg');
  display: inline-block;
}

.icon-2 {
  background-image: url('../assets/pub/menu/2.svg');
  display: inline-block;
}

然后我让后端存菜单图标的时候就存css类名就可以了，到时候我就根据不同的类名显示不同的图标。

但是这样做的话，要自己一个个的去写一堆样式类，所以我想能不能用scss编程解决这个问题而不是我手动一个个的去写，能不能一次性把这个文件夹的图片引用，然后使用循环生成一堆这样有规律的样式类？

Answer 1

@for $i from 1 through 3 {
  .icon-#{$i} { 
    background-image: url('../assets/pub/menu/$i.svg');
  }
}

但是我估计循环多少个你不知道，建议直接写在页面上，比如

<div class="a" v-for="i in xx" :style="{backgroundImage: 'url(xxxx'+ i +')'}"/>
.a{display:inline-block}

Answer 2

scss for循环：https://www.sass.hk/docs/
ps: 可配置的怎么不是配icon的链接而是存类名？