如何在css或sass中为类名起别名答案

【问题标题】：how to alias class name in css or sass如何在css或sass中为类名起别名
【发布时间】：2012-10-31 09:28:02
【问题描述】：

我可以为 css 类创建别名吗？

我正在使用这种很棒的字体，并且我正在尝试为某些图标类创建别名。这样.icon-globe 也将调用.globe。

我怎样才能完成这样的事情？

【问题讨论】：

【解决方案1】：

您可以使用普通的 css 逗号分隔选择器将相同的样式应用于多个类：

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

将对<i class="icon-globe"> 和<i class="globe"> 应用相同的样式。

【讨论】：

谢谢。仅当我在此块中定义样式时才有效？问题是，不想修改字体真棒文件。
是的，在某些情况下，我可能无法“访问”类，或者可能不想投入精力来查找定义的位置。

【解决方案2】：

我能想到的最简单的方法是使用 javascript/jquery。

jQuery:

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

【讨论】：

对于对我的答案投反对票的人，如果您觉得代码不足，请发表评论，或者编辑我的答案，我很乐意审核您的请求 :)
老问题......虽然，但很明显，调用者并没有问这个。他们想知道的是如何开始使用 .globe ，而不是使用 .icon-globe。
您要求对否决票发表评论，所以我留下了一个。无需防守。
OneChillDude 等人的回答证明了他们能够识别问题所问的根本问题并帮助解决该问题（而不是“你不能完全按照你的要求去做”）为什么我们来 SO。
对我来说，这个答案是这样的：How can I change my REST endpoint to return a different object?，然后是回复Use jQuery to change that stuff on the UI。 - OP 在他们的帖子中没有提到 jQuery。我一直在寻找一种方法来更好地使用会损害可读性的愚蠢的长类名来构建 SCSS。所以我不同意@jpwynn，我的根本问题是不同的，我的项目中什至没有 jQuery。

【解决方案3】：

没有别名。 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 文件，而不是将所有这些样式附加到 FontAwesome 附带的所有约 200 个类中。你可以做，但我觉得效果不是很好。

【讨论】：

【解决方案4】：

您可能对CSS Crush 感兴趣，它允许您创建别名http://the-echoplex.net/csscrush/#core--selector-aliases

用法

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

:globe {
  color: red;
}

输出

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

【讨论】：

【解决方案5】：

我知道这是一个较老的问题，但我正在回答这个问题，因为该线程看起来不完整......

通过扩展icon-globe 类，您可以使用SASS 轻松做到这一点

.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 */
}

【讨论】：

【解决方案6】：

您可以使用 SASS mixin @content 为选择器或它们的组合创建别名，如下所示：

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

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

SASS 会为你生成这个：

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

阅读更多关于SASS mixin content block的信息；

【讨论】：

这是 2019 年比使用 jQuery 更明智的回应