Как псевдоним имя класса в css или sass

Ответ 1

Там нет такой вещи, как псевдонимы. У Sass есть директива @extend, но решение не совсем очевидно, пока вы не посмотрите на источник.

Источник: 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"; }

Даже если вы сделаете .globe расширенным .icon-globe, вы пропустите большую часть того, что делает стили FontAwesome, из-за того, как они создали селектор. Вы также должны расширить другой селектор.

Это:

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

компилируется в

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

Обратите внимание, что префикс icon- был преднамеренным. Таким образом вы получаете файлы CSS меньшего размера, вместо того чтобы прикреплять все эти стили ко всем ~ 200 классам, которые поставляются с FontAwesome. Вы можете сделать это, но я не думаю, что результат очень хороший.

Ответ 2

Самый простой способ, который я могу придумать, - использовать javascript/jquery.

JQuery

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

Ответ 3

Я знаю, что это старый вопрос, но я отвечаю на это, потому что поток выглядит неполным...

Вы можете легко сделать это с помощью SASS, расширив класс icon-globe

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

Выходной CSS будет таким, как

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

Учитывая новые имена классов Font-Awesome, вам понадобится использовать .fa-globe с несколькими расширениями класса

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

Выходной CSS будет таким, как

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

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

Ответ 4

Вы можете применить одни и те же стили к нескольким классам с помощью простых селекторов css, разделенных запятой:

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

Применит те же стили к <i class="icon-globe"> и <i class="globe">.

Ответ 5

Вам может быть интересно CSS Crush, который позволяет создавать псевдонимы http://the-echoplex.net/csscrush/#core--selector-aliases

Использование

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

:globe {
  color: red;
}

Результаты

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

Ответ 6

Ни SASS, ни CSS3/4 поддерживать псевдонимы. Вам нужно будет использовать точное имя класса, если вы хотите использовать font awesome.

Ответ 7

Вы можете использовать SASS mixin @content для создания псевдонима для селектора или их комбинации следующим образом:

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

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

SASS сгенерирует это для вас:

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

Подробнее о блоке контента SASS mixin;