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.