Question

我有许多引用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
  }
}

预先感谢

Answer 1

以下SASS

<button onclick="callCustomer(document.getElementById('#phone'))" type="button" name="call" id="call" class="btn btn-primary btn-lg call-customer-button">
  <span class="glyphicon glyphicon-earphone" aria-hidden="true"></span>
                  Call customer
</button>

<input type="text" id="phone" name"phone">

提供此CSS

$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);
      }
  }
}

您可以浏览，编辑或编辑此Sassmeister

Answer 2

尝试一下：

$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);
  }
}

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

2 个答案: