如何在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个类中.你可以做到,但我不认为结果非常好.

Answer 2

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

jQuery的:

$(document).ready(function() {
  $('.globe').addClass('icon-globe');
});

Answer 3

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

您可以SASS通过扩展icon-globe课程轻松完成此操作

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

输出CSS将为,

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

考虑到Font-Awesome的新类名,您将需要使用.fa-globewith multiple class extends

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

输出CSS将为,

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

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

Answer 4

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

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

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

SASS 将为您生成：

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

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

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

Answer 5

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

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

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