如何在 css 或 sass 中为类名设置别名
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/13335544/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
how to alias class name in css or sass
提问by bymannan
Can I create an alias to a css class?
我可以为 css 类创建别名吗？
I am using this font-awesome and I am trying to create an alias name for some of the icon classes. So that .icon-globewill also called .globe.
我正在使用这种字体真棒，我正在尝试为某些图标类创建别名。所以那.icon-globe也将调用.globe.
How can I accomplish such thing?
我怎样才能完成这样的事情？
回答by cimmanon
There's no such thing as aliasing. Sass does have the @extenddirective, but the solution isn't entirely obvious until you look into the source.
没有混叠之类的东西。Sass 确实有@extend指令，但在您查看源代码之前，解决方案并不完全显而易见。
Source: https://github.com/FortAwesome/Font-Awesome/blob/master/sass/font-awesome.scss
来源：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 .globeextend .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.
即使您使用了.globeextend .icon-globe，您也会因为它们构建选择器的方式而错过大部分构成 FontAwesome 样式的内容。您还必须扩展另一个选择器。
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 cando it, but I don't think the result is very good.
请注意，icon-前缀是故意的。您可以通过这种方式获得更小的 CSS 文件，而不是将所有这些样式附加到 FontAwesome 附带的所有约 200 个类。你可以做到，但我认为结果不是很好。
回答by OneChillDude
Easiest way I can think of is to use javascript/jquery.
我能想到的最简单的方法是使用 javascript/jquery。
jQuery:
jQuery：
$(document).ready(function() {
$('.globe').addClass('icon-globe');
});
回答by asp
I know this is an older question but I am answering this because the thread looks incomplete...
我知道这是一个较旧的问题，但我正在回答这个问题，因为该线程看起来不完整......
You can easily do this with SASSby extending the icon-globeclass
您可以SASS通过扩展icon-globe类轻松做到这一点
.globe{
@extend .icon-globe !optional;
}
The output CSS will be as,
输出 CSS 将是，
.globe,.icon-globe{
/* CSS Properties */
}
Considering the new class names of Font-Awesome, you will be need to using the .fa-globewith multiple class extending
考虑到 Font-Awesome 的新类名，您将需要使用.fa-globe具有多个类扩展的
.globe{
@extend .fa, .fa-globe !optional;
}
The output CSS will be as,
输出 CSS 将是，
.fa,.globe{
/* ... */
}
.globe,.fa-globe{
/* CSS Properties */
}
回答by limitlessloop
You may be interested in CSS Crushwhich allows you to create aliases http://the-echoplex.net/csscrush/#core--selector-aliases
您可能对CSS Crush感兴趣，它允许您创建别名http://the-echoplex.net/csscrush/#core--selector-aliases
Usage
用法
@selector globe :any( .icon-globe, .globe );
:globe {
color: red;
}
Outputs
输出
.icon-globe, .globe {
color: red;
}
回答by bookcasey
You can apply the same styles to several classes using plain css comma separated selectors:
您可以使用纯 css 逗号分隔选择器将相同的样式应用于多个类：
.icon-globe, .globe {
//styles
}
Will apply the same styles to <i class="icon-globe">and <i class="globe">.
将应用相同的样式<i class="icon-globe">和<i class="globe">。
回答by Madmadi
You can use SASS mixin @contentto create an alias for a selector or combination of them like this:
您可以使用 SASS mixin@content为选择器或它们的组合创建别名，如下所示：
@mixin icon {
.icon-globe,
.globe {
@content;
}
}
@include icon {
font-size: 16px;
}
SASS will generate this for you:
SASS 会为你生成这个：
.icon-globe,
.globe {
font-size: 16px;
}
Read more about SASS mixin content block;
阅读有关SASS 混合内容块的更多信息；
