使用 bootstrap + font-awesome 减少 CSS “别名”答案

【问题标题】：Less CSS "alias" with bootstrap + font-awesome使用 bootstrap + font-awesome 减少 CSS “别名”
【发布时间】：2013-10-30 01:28:59
【问题描述】：

我的网站使用bootstrap + font-awesome，我正在尝试在我的site.less 文件中创建一个“别名”：

.icon-domain { .icon-fire; }
.icon-group  { .icon-tags; }

我这样做的原因是因为我的网站上有一个“域”实体，我将来可能会更改图标，所以我不想直接使用我的 HTML 中的“火”图标。

icon-group 类适用于我的代码，但 icon-domain 不能。据我所知，这是因为 font-awesome 实际上在其代码中有一个 icon-group 类。根据我对lesscss 的理解，我可以在另一个类中包含一个类以将它们组合成一个新类，但它在这里根本不起作用。

如果我在我的site.less 中这样做，我可以让它工作：

.icon-domain { &:before { content: "\f06d"; } }

但这并不理想，因为我必须自己定义内容并且使用 .icon-domain { .icon-fire; &:before; } 是语法错误。有没有办法让它正常工作？

【问题讨论】：

标签： twitter-bootstrap less font-awesome

【解决方案1】：

您需要将 Font Awesome CSS 导入您的 LESS 文件和 let LESS process it。

没有它，LESS 将无法检测到您尝试使用的类。

【讨论】：

【解决方案2】：

您需要包含足够的引导程序依赖项：

@import "bootstrap/variables.less";
@import "bootstrap/mixins.less";
@import "bootstrap/sprites.less";

.icon-domain { .icon-fire; }
.icon-group  { .icon-tags; }

【讨论】：

我最初并没有澄清，但我确实包含了所有引导程序依赖项。谢谢。