SCSS / SASS динамическое фоновое изображение на основе имени класса

Question

Я искал "нахальный" способ сделать что-то вроде этого:

.btn-save {
  background: image-url('save.svg');
}

.btn-load {
  background: image-url('load.svg');
}

.btn-back {
  background: image-url('back.svg');
}

Есть ли способ, которым я мог бы взять последнюю часть имени класса и передать ее функции, чтобы загрузить соответствующий значок SVG? Я думал, что это будет выглядеть примерно так:

@function load-svg($svg-name) {
  background: image-url($svg-name + ".svg");
}

.btn-* {
  // I'm not sure how to get the $svg-name here
  load-svg($svg-name);
}

Но я не был уверен, возможно ли это сделать в SCSS. Любая помощь будет высоко ценится, спасибо!

Answer 1

Если вы хотите СУХОЙ подход, вы можете передать список в миксин

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