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

Answer 1

You may be interested in CSS Crush which allows you to create aliases http://the-echoplex.net/csscrush/#core--selector-aliases

Usage

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

:globe {
  color: red;
}

Outputs

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

Answer 2

You can apply the same styles to several classes using plain css comma separated selectors:

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

Will apply the same styles to <i class="icon-globe"> and <i class="globe">.

Answer 3

You can use SASS mixin @content to create an alias for a selector or combination of them like this:

@mixin icon {
   .icon-globe,
   .globe {
      @content;
   }
}

@include icon {
   font-size: 16px;
}

SASS will generate this for you:

.icon-globe,
.globe {
   font-size: 16px;
}

Read more about SASS mixin content block;

Answer 4

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

jQuery:

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

Answer 5

I know this is an older question but I am answering this because the thread looks incomplete...

You can easily do this with SASS by extending the icon-globe class

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

The output CSS will be as,

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

Considering the new class names of Font-Awesome, you will be need to using the .fa-globe with multiple class extending

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

The output CSS will be as,

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

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

Answer 6

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.