基于类名称的SCSS / SASS动态背景图像

Question

我一直在寻找一种“笨拙”的方式来做这样的事情：

f

是否可以获取类名的最后一部分并将其传递给函数以加载适当的SVG图标？我当时在想像是这样：

2

但是我不确定在SCSS中是否可以做到这一点。任何帮助将不胜感激，谢谢！

Answer 1

如果您要使用DRY方法，可以将列表传递给mixin

@mixin setSVGButton($svgs) {
  @each $svg in $svgs {
    .btn-#{$svg} {
      background-image: url(#{$svg}.svg);
    }
  } 
}


@include setSVGButton(('save', 'load', 'back'));

Answer 2

你的意思是这样吗

@mixin btn($btn-type) {
    .btn-#{$btn-type} {
        background: image-url('#{$btn-type}.svg');
  }
}

@include btn('save');
@include btn('load');
@include btn('back');