时间戳

首页 > 解决方案 > SASS 我可以用字符串和列表值组成变量名吗

css - SASS 我可以用字符串和列表值组成变量名吗

问题描述

我有许多引用 SVG 图标的 SASS 变量。下面是一个简化的例子：

我希望能够遍历字符串列表并以使用 icon-checkbox 类的背景样式呈现的方式组成 SASS 变量名称。到目前为止，我的方法不起作用。我可以告诉我如何/是否可以在 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
  }
}

提前致谢

标签： csssass

解决方案

以下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

推荐阅读