如何在css或sass中别名类名

Question

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

我正在使用这种字体真棒，我试图为某些图标类创建一个别名。那么.icon-globe也会叫.globe。

我该如何完成这样的事情？

Answer 1

SASS和CSS3/4都不支持别名。如果您想使用font awesome，则必须使用确切的课程名称。

Answer 2

您可以将相同的样式，以使用纯CSS逗号分隔的选择几类：

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

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

Answer 3

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

的jQuery：

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

Answer 4

有混叠没有这样的事情。 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 5

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

使用

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

:globe { 
    color: red; 
} 

输出

.icon-globe, .globe { 
    color: red; 
} 

Answer 6

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

您可以通过扩展icon-globe类

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

输出CSS将与SASS很容易地做到这一点，

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

考虑的新的类名字体，真棒，你将需要使用.fa-globe与多个类别延伸

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

输出CSS会作为，

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

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