jak alias nazwa klasy w css lub sass

Question

Czy mogę utworzyć alias do klasy css?

Używam tej font-awesome i próbuję utworzyć alias dla niektórych klas ikon. Tak więc, theicon-globus będzie również nazywał się .globe.

Jak mogę to zrobić?

Answer 1

Ani SASS ani CSS3/4 obsługuje aliasów. Będziesz musiał użyć dokładnej nazwy klasy, jeśli chcesz użyć font awesome.

Answer 2

Można stosować te same style do kilku klas, stosując zwykły css selektorów oddzielonych przecinkami:

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

stosuje te same style do <i class="icon-globe"> i <i class="globe">.

Answer 3

Najprostszym sposobem, jaki mogę wymyślić jest użycie javascript/jquery.

jQuery:

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

Answer 4

Nie ma czegoś takiego jak aliasing. Sass ma dyrektywę @extend, ale rozwiązanie nie jest całkowicie oczywiste, dopóki nie spojrzy się na źródło.

Źródło: 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"; } 

Nawet jeśli się .globe przedłużyć .icon-globe, będziesz brakuje na większość tego, co sprawia, że ​​style FontAwesome powodu jak oni zbudowali selektora. Musisz również rozszerzyć drugi selektor.

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

Generuje:

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

Zauważ, że przedrostek icon- było celowe. W ten sposób dostajesz mniejsze pliki CSS, zamiast dołączać wszystkie te style do wszystkich ~ 200 klas, które są dostarczane z FontAwesome. You można zrobić, ale nie sądzę, że wynik jest bardzo dobry.

Answer 5

Możesz być zainteresowany CSS Crush który pozwala na tworzenie aliasów http://the-echoplex.net/csscrush/#core--selector-aliases

Składnia

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

:globe { 
    color: red; 
} 

Wyjścia

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

Answer 6

wiem, że to ja s to starsze pytanie, ale odpowiadam na to, ponieważ wątek wygląda na niekompletny ...

można łatwo zrobić z SASS poprzez rozszerzenie klasy icon-globe

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

Sygnał wyjściowy CSS będzie tak,

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

Biorąc pod uwagę nowe nazwy klasy Font-Awesome, ci będzie konieczne użycie narzędzia .fa-globe z wieloma klasami rozszerzającymi:

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

CSS wyjście będzie jak

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

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