更换图标代工厂=搜索并替换类名称snafu

Question

当我们更换图标代工厂时，它会导致一个小问题，因为图标名称会发生​​变化，因此需要重新访问许多代码。使用text utils可能会进行一些自动翻译，但是当图标名称以结构化方式生成时（例如，基于布尔值的i-star-filled v / s i-star-empty）可能无法自动翻译。

我想要的是使用我的图标的功能名称（例如xyz-search，xyz-cancel，xyz-filterable等），然后将它们映射到代工厂提供的实际图标名称。例如，glyphicon名称可能与font awesome使用的名称不同。我如何提供某种间接（HTML标签强大和em提供的那种解放）？

我们首先想到的是在javascript中使用查找表从一个名称空间转换为另一个名称空间。但这只有在生成HTML时才有效（我们使用angularjs）;对静态代码没有帮助，也不会在计算生成图标名称的少数情况下，如第一段中的示例所示。

所以现在我们正在玩SASS（我用谷歌搜索了一下但是徒劳无功，我的CSS也不是很闪亮）。是否存在适合此处的SASS习语，以翻译类似

的内容

<i class="xyz-filterable ...">

到

<i class="i-funnel ...">

获得相同的视觉和互动结果。 （我知道实际的CSS会看起来很不一样）

我不想使用任何foo.addClass（）。

由于

Answer 1

使用@extend：

萨斯：

.xyz-filterable {
  background-image: url(foo.png);
}

.i-funnel {
  @extend .xyz-filterable;
}

编译CSS：

.xyz-filterable, .i-funnel {
  background-image: url(foo.png);
}