SASS я могу составить имя переменной со строкой и значением списка

Question

У меня есть несколько переменных SASS, которые ссылаются на значки SVG. Ниже приведен упрощенный пример:

Я бы хотел иметь возможность циклически проходить по списку строк и составлять имя переменной SASS способом, который представлен с использованием стиля фона класса icon-checkbox. Мой подход пока не работает. Можно ли мне показать, как / если это можно сделать в SASS.

$icon-trash-grey: "data:image/svg+xml;charset=UTF-8,<svg data>";
$icon-save-grey: "data:image/svg+xml;charset=UTF-8,<svg data>";

$icon-list: trash, save; // list of icon names

.icon-checkbox {
  @each $key in $icon-list {
     background: url($icon-#{$key}-grey);
     // other styles
  }
}

Заранее спасибо

Answer 1

Попробуйте это:

$icon-list : (
  "icon-trash-grey": "data:image/svg+xml;charset=UTF-8,<svg data>",
  "icon-save-grey": "data:image/svg+xml;charset=UTF-8,<svg data>"
); 

@each $key, $val in $icon-list {
  .#{$key} {
    background: url($val);
  }
}

Answer 2

следующий SASS

$icon-trash-grey: "data:image/svg+xml;charset=UTF-8,<svg data>";
$icon-save-grey: "data:image/svg+xml;charset=UTF-8,<svg data>";  

$icon-map: (
  trash: $icon-trash-grey, 
  save:  $icon-save-grey,
);

.icon{
  @each $key, $value in $icon-map {
      &.#{$key} {
          background: url($value);
      }
  }
}

отображает этот CSS

.icon.trash {
  background: url("data:image/svg+xml;charset=UTF-8,<svg data>");
}
.icon.save {
  background: url("data:image/svg+xml;charset=UTF-8,<svg data>");
}

Вы можете посмотреть, внести изменения или раскошелиться на это Sassmeister