come alias nome classe in css o sass

Question

Posso creare un alias in una classe css?

Sto usando questo font-fantastico e sto cercando di creare un nome alias per alcune delle classi di icone. In questo modo .icon-globe chiamerà anche .globe.

Come posso realizzare una cosa del genere?

Answer 1

Né SASS né CSS3/4 alias di supporto. Dovrai usare il nome esatto della classe se vuoi usare font awesome.

Answer 2

È possibile applicare gli stessi stili di diverse classi che utilizzano pianura css virgola selettori separati:

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

applicherà gli stessi stili di <i class="icon-globe"> e <i class="globe">.

Answer 3

Il modo più semplice che posso pensare è usare javascript/jquery.

jQuery:

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

Answer 4

Non esiste una cosa come aliasing. Sass ha la direttiva @extend, ma la soluzione non è del tutto ovvia fino a quando non si guarda alla fonte.

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

Anche se hai fatto .globe estendono .icon-globe, ti verrà mancanti sulla maggior parte di ciò che rende gli stili FontAwesome a causa di come hanno costruito il selettore. Devi estendere anche l'altro selettore.

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

Genera:

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

Nota che il prefisso icon- era intenzionale. Si ottengono file CSS più piccoli in questo modo, anziché collegare tutti questi stili a tutte le ~ 200 classi fornite con FontAwesome. È possibile farlo, ma non penso che il risultato sia molto buono.

Answer 5

Potreste essere interessati a CSS Crush, che permette di creare degli alias http://the-echoplex.net/csscrush/#core--selector-aliases

utilizzo

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

:globe { 
    color: red; 
} 

uscite

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

Answer 6

So che questo mi è una domanda più vecchia, ma sto rispondendo perché il thread sembra incompleto ...

Si può facilmente farlo con SASS estendendo la classe icon-globe

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

L'uscita CSS sarà come,

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

Considerando i nuovi nomi delle classi di Font-Impressionante, è sarà necessario utilizzare lo .fa-globe con più classi che si estendono

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

Il CSS uscita sarà come,

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

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