web-dev-qa-db-fra.com

comment alias le nom de classe en CSS ou SASS

Puis-je créer un alias pour une classe CSS?

J'utilise cette police géniale et j'essaie de créer un nom d'alias pour certaines des classes d'icônes. Pour que .icon-globe sera également appelé .globe.

Comment puis-je accomplir une telle chose?

csssassfont-awesome
35
bymannan

Il n'y a rien de tel que l'aliasing. Sass a le @extend directive, mais la solution n'est pas entièrement évidente tant que vous n'avez pas regardé la source.

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

Même si vous avez fait .globe étendre .icon-globe, vous manquerez la plupart de ce qui fait les styles FontAwesome à cause de la façon dont ils ont construit le sélecteur. Vous devez également étendre l'autre sélecteur.

Cette:

.globe {
    @extend .icon-globe;
    @extend [class^="icon-"];
}

compile en

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

Notez que le icon- le préfixe était délibéré. Vous obtenez des fichiers CSS plus petits de cette façon, plutôt que d'attacher tous ces styles à toutes les ~ 200 classes fournies avec FontAwesome. Vous pouvez le faire, mais je ne pense pas que le résultat soit très bon.

21
cimmanon

La façon la plus simple à laquelle je peux penser est d'utiliser javascript/jquery.

jQuery:

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

Je sais que c'est une question plus ancienne mais j'y réponds car le fil semble incomplet ...

Vous pouvez facilement le faire avec SASS en étendant le icon-globe classe

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

Le CSS de sortie sera comme,

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

Compte tenu des nouveaux noms de classe de Font-Awesome, vous devrez utiliser le .fa-globe avec extension de plusieurs classes

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

Le CSS de sortie sera comme,

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

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

Vous pouvez être intéressé par CSS Crush qui vous permet de créer des alias http://the-echoplex.net/csscrush/#core--selector-aliases

Utilisation 

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

:globe {
  color: red;
}

Sorties 

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

Vous pouvez appliquer les mêmes styles à plusieurs classes à l'aide de sélecteurs séparés par des virgules CSS simples:

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

Appliquera les mêmes styles à <i class="icon-globe"> et <i class="globe">.

3
bookcasey