如何通过SCSS基于类名后缀动态加载对应SVG背景图？

当然可以实现！你想要的这种通过类名后缀自动关联SVG图标的需求，在SCSS里完全能搞定，而且能帮你省去大量重复代码。不过有个小细节要注意：SCSS是预编译工具，没法直接“捕获”你手写的.btn-*类名后缀，所以我们换个思路——预先维护图标名称列表，通过循环自动生成对应的类和样式，具体实现如下：

1. 定义图标名称列表 #

先把所有需要的图标名称放在一个列表里，后续要加新图标，只需要在这里追加就行：

$svg-icons: save, load, back; // 可随时添加新图标，比如add, delete等

2. 编写混合宏处理SVG背景样式 #

比起你设想的@function，这里更适合用@mixin（混合宏），因为我们需要输出的是完整的样式声明，而函数主要用来计算返回值：

@mixin load-svg($svg-name) {
  background: image-url('#{$svg-name}.svg');
  // 可以在这里添加通用按钮样式，让所有图标按钮保持统一
  background-repeat: no-repeat;
  background-position: center center;
  border: none;
  padding: 8px 16px;
  cursor: pointer;
}

3. 循环生成所有图标按钮类 #

通过@each循环遍历图标列表，自动生成对应的.btn-*类，并调用混合宏传入图标名称：

@each $icon in $svg-icons {
  .btn-#{$icon} {
    @include load-svg($icon);
  }
}

编译后的CSS效果 #

预编译后会自动生成你最初想要的样式，甚至包含你添加的通用样式：

.btn-save {
  background: image-url('save.svg');
  background-repeat: no-repeat;
  background-position: center center;
  border: none;
  padding: 8px 16px;
  cursor: pointer;
}

.btn-load {
  background: image-url('load.svg');
  background-repeat: no-repeat;
  background-position: center center;
  border: none;
  padding: 8px 16px;
  cursor: pointer;
}

.btn-back {
  background: image-url('back.svg');
  background-repeat: no-repeat;
  background-position: center center;
  border: none;
  padding: 8px 16px;
  cursor: pointer;
}

补充说明 #

• 如果你的项目不是基于Rails这类自带image-url函数的环境，可以把image-url换成标准的url()，比如url('#{$svg-name}.svg')，记得调整SVG文件的路径。
• 这种方式的优势在于可维护性极强，新增图标只需要在$svg-icons列表里加个名称，不用重复写样式结构，避免人为错误。

内容的提问来源于stack exchange，提问作者Ccyan