web-dev-qa-db-ja.com

cssまたはsassでクラス名をエイリアスする方法

CSSクラスのエイリアスを作成できますか？

私はこの素晴らしいフォントを使用しており、いくつかのアイコンクラスのエイリアス名を作成しようとしています。したがって、.icon-globeは.globeとも呼ばれます。

どうすればそのようなことを達成できますか？

csssassfont-awesome
35
bymannan

エイリアシングなどはありません。 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ファイルを取得します。あなたはcanできますが、結果は非常に良いとは思いません。

21
cimmanon

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

jQuery：

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

私はこれが古い質問であることを知っていますが、スレッドが不完全に見えるのでこれに答えています...

icon-globeクラスを拡張することにより、SASSで簡単にこれを行うことができます。

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

出力CSSは次のようになります。

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

Font-Awesomeの新しいクラス名を考慮すると、複数のクラスを拡張する.fa-globeを使用する必要があります

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

出力CSSは次のようになります。

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

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

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

使用法

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

:globe {
  color: red;
}

出力

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

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

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

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

3
bookcasey