如何在css或sass中别名类名 [英] how to alias class name in css or sass

问题描述

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

Can I create an alias to a css class?

我使用这个字体awesome，我试图为某些图标类创建别名。所以.icon-globe也会调用.globe。

I am using this font-awesome and I am trying to create an alias name for some of the icon classes. So that .icon-globe will also called .globe.

如何完成这样的事情？

How can I accomplish such thing?

推荐答案

没有别名。 Sass有 @extend 指令，但是解决方案在你查看源代码之前并不是很明显。

There's no such thing as aliasing. Sass does have the @extend directive, but the solution isn't entirely obvious until you look into the source.

资料来源： 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 extend .icon-globe ，你会错过大部分的FontAwesome风格，因为他们如何构建选择器。您还必须扩展其他选择器。

Even if you made .globe extend .icon-globe, you'll be missing out on most of what makes the FontAwesome styles because of how they built the selector. You have to extend the other selector as well.

.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"; }

请注意，图标 - 商榷。你这样得到较小的CSS文件，而不是将所有这些样式附加到FontAwesome附带的〜200个类。您可以 ，但我不认为结果非常好。

Note that the icon- prefix was deliberate. You get smaller CSS files this way, rather than attaching all of those styles to all ~200 classes that come with FontAwesome. You can do it, but I don't think the result is very good.

这篇关于如何在css或sass中别名类名的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！