45

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

我正在使用这种很棒的字体，并且正在尝试为某些图标类创建别名。所以那.icon-globe也叫.globe.

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

4

6 回答 6

25

没有混叠之类的东西。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"; }

即使你做了.globeextend .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 个类中。你可以做到，但我认为结果不是很好。

于 2012-11-11T22:00:15.840 回答
22

我能想到的最简单的方法是使用 javascript/jquery。

jQuery：

$(document).ready(function() {
  $('.globe').addClass('icon-globe');
});
于 2012-11-11T21:25:51.247 回答
15

我知道这是一个较老的问题，但我正在回答这个问题，因为线程看起来不完整......

SASS您可以通过扩展icon-globe类轻松地做到这一点

.globe{
    @extend .icon-globe !optional;
}

输出 CSS 将如下所示，

.globe,.icon-globe{
   /* CSS Properties */
}

考虑到 Font-Awesome 的新类名，您将需要使用.fa-globe多类扩展

.globe{
    @extend .fa, .fa-globe !optional;
}

输出 CSS 将如下所示，

.fa,.globe{
 /* ... */
}

.globe,.fa-globe{
   /* CSS Properties */
}
于 2016-03-04T03:55:01.433 回答
4

您可以使用普通的 css 逗号分隔选择器将相同的样式应用于多个类：

.icon-globe, .globe {
  //styles
}

将对<i class="icon-globe">和应用相同的样式<i class="globe">。

于 2012-11-11T21:21:40.507 回答
3

您可能对CSS Crush感兴趣，它允许您创建别名http://the-echoplex.net/csscrush/#core--selector-aliases

用法

@selector globe :any( .icon-globe, .globe );

:globe {
  color: red;
}

输出

.icon-globe, .globe {
  color: red;
}
于 2014-11-04T13:54:43.127 回答
3

您可以使用 SASS mixin@content为选择器或它们的组合创建别名，如下所示：

@mixin icon {
   .icon-globe,
   .globe {
      @content;
   }
}

@include icon {
   font-size: 16px;
}

SASS 会为你生成这个：

.icon-globe,
.globe {
   font-size: 16px;
}

阅读有关SASS 混合内容块的更多信息；

于 2019-10-06T14:04:09.847 回答