css - 如何在 css 或 sass 中为类名起别名

Question

我可以为 css 类创建别名吗？

我正在使用这个很棒的字体，我正在尝试为一些图标类创建一个别名。这样 .icon-globe 也将调用 .globe。

我怎样才能完成这样的事情？

Answer 1

没有别名之类的东西。 Sass 确实有 @extend 指令，但在您查看源代码之前，解决方案并不完全显而易见。

来源:https://github.com/FortAwesome/Font-Awesome/blob/master/sass/font-awesome.scss

[class^="icon-"]:before,
[class*=" icon-"]:before {
  font-family: FontAwesome;
  font-weight: normal;
  font-style: normal;
  display: inline-block;
  text-decoration: inherit;
}

// snip

.icon-globe:before                { content: "\f0ac"; }

即使您使 .globe 扩展了 .icon-globe，您也会错过 FontAwesome 样式的大部分内容，因为它们是如何构建选择器的.您还必须扩展其他选择器。

这个:

.globe {
    @extend .icon-globe;
    @extend [class^="icon-"];
}

编译为

[class^="icon-"]:before, .globe:before,
[class*=" icon-"]:before {
  font-family: FontAwesome;
  font-weight: normal;
  font-style: normal;
  display: inline-block;
  text-decoration: inherit; }

.icon-globe:before, .globe:before {
  content: "\f0ac"; }

请注意，icon- 前缀是故意的。您可以通过这种方式获得更小的 CSS 文件，而不是将所有这些样式附加到 FontAwesome 附带的所有约 200 个类。你可以做，但我认为结果不是很好。