how to alias class name in css or sass

Question

Can I create an alias to a css class?

I am using this font-awesome and I am trying to create an alias name for some of the icon classes. So that .icon-globe will also called .globe.

How can I accomplish such thing?

Answer 1

There's no such thing as aliasing. Sass does have the @extend directive, but the solution isn't entirely obvious until you look into the 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"; } 

Even if you made .globe extend .icon-globe, you'll be missing out on most of what makes the FontAwesome styles because of how they built the selector. You have to extend the other selector as well.

This:

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

compiles to

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

Note that the icon- prefix was deliberate. You get smaller CSS files this way, rather than attaching all of those styles to all ~200 classes that come with FontAwesome. You can do it, but I don't think the result is very good.

Answer 2

Easiest way I can think of is to use javascript/jquery.

jQuery:

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