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

extendsを作成したとしても、 .globeFontAwesome.icon-globeスタイルを構成する要素のほとんどは、セレクターの作成方法によって失われます。他のセレクターも拡張する必要があります。

これ：

.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 2

私が考えることができる最も簡単な方法は、javascript/jquery を使用することです。

jQuery:

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

Answer 3

プレーンな CSS カンマ区切りのセレクターを使用して、同じスタイルを複数のクラスに適用できます。

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

と に同じスタイルを適用し<i class="icon-globe">ます<i class="globe">。

Answer 4

エイリアスを作成できるCSS Crushに興味があるかもしれませんhttp://the-echoplex.net/csscrush/#core--selector-aliases

使用法

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

:globe {
  color: red;
}

出力

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