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-プレフィックスが意図的だったこと。 FontAwesomeに付属するすべての〜200クラスにこれらのスタイルをすべて添付するのではなく、この方法でより小さなCSSファイルを取得できます。あなたはできますそれを行うが、私は結果が非常に良いとは思わない。

Answer 5

あなたは、私がこの私を知っているあなたは別名http://the-echoplex.net/csscrush/#core--selector-aliases

使用

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

:globe { 
    color: red; 
} 

出力

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

Answer 6

を作成することを可能にするCSS Crushに興味がある可能性があり古い質問ですが、スレッドが不完全に見えるので、私はこれに答えています...あなたは簡単に、出力CSSが

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

フォント-恐ろしいの新しいクラス名を考慮すると、のようになります。icon-globeクラス

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

を拡張することにより、SASSであなたをこれを行うことができます

.fa-globeを複数のクラスを拡張して使用する必要があります

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

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

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