SASS Optimize Font Awesome 仅用于使用的类答案

【问题标题】：SASS Optimize Font Awesome for only used classesSASS Optimize Font Awesome 仅用于使用的类
【发布时间】：2015-03-29 09:13:19
【问题描述】：

是否可以让 SASS 只为使用的图标添加代码？因为这样会减小 CSS 文件的大小，

我从一个类似的问题中看到了http://fontello.com/ 解决方案，但我想知道是否有办法使用 font awesome 来做到这一点，

编辑： 由于存在一些误解，我想澄清一下我想知道的是： 是否可以告诉 SASS 他应该编译哪些图标？

【问题讨论】：

您可以使用您发布的网站。有一个名为“Font Awesome”的标题，您可以在其中单击您使用的 FA 图标。完成后只需点击右上角的下载...就这么简单。
但我想知道是否可以使用 font awesome 和 SASS 来做到这一点。就像在 SASS 文件上说我需要的图标，只有那些会被添加。
你认为 Sass 应该如何知道你使用什么？ Sass 只编译成 CSS。
我想知道的是是否可以告诉sass文件我想让他添加什么图标
应该是：“她应该编译什么图标？” - SASS

标签： css sass font-awesome

【解决方案1】：

如何告诉 FA 编译什么

使用 SCSS（SASS CSS 形式语法）

下载解压font-awesome-4.x.zip
导航到./scss
打开_icons.scss
删除所需的字形

例如：

.#{$fa-css-prefix}-times:before { content: $fa-var-times; }
.#{$fa-css-prefix}-search-plus:before { content: $fa-var-search-plus; }
.#{$fa-css-prefix}-search-minus:before { content: $fa-var-search-minus; }
.#{$fa-css-prefix}-power-off:before { content: $fa-var-power-off; }
.#{$fa-css-prefix}-signal:before { content: $fa-var-signal; }
.#{$fa-css-prefix}-gear:before,

每一行代表一个字形。删除您不会使用的行。

以缩小和/或常规格式将./font-awesome.scss 重新编译为../css。

【讨论】：

我不明白这个问题是如何回答这个问题的。首先，OP 是在询问 Sass，而不是 LESS。其次，OP 希望 Sass 神奇地知道他们正在使用哪些图标，并且只生成必要的最少 CSS。
你几乎没有判断力。这篇文章是关于 SASS 和更少的，这取决于他使用的 OP，但步骤是相同的。这也是一个答案，而不是一个问题。 OP从来没有说过任何关于魔法的事情。修正它。这就是答案。
@cimmano 我不想要什么神奇的东西，我想知道有没有办法告诉我的 SASS 编译什么。
@rob180 我已经更新了完成任务所需的确切详细信息的答案
这是缩小 CSS - 不幸的是，这对编译的字体没有影响 - 这是主要的重量 - 使用 Fontello

【解决方案2】：

我用https://github.com/FortAwesome/Font-Awesome

主文件包含：

import "variables";
import "mixins";
import "path";
import "core";
import "larger";
import "fixed-width";
import "list";
import "bordered-pulled";
import "animated";
import "rotated-flipped";
import "stacked";
import "icons";

您必须更改文件 _icons.scss ，以使 SASS 仅添加已使用图标的代码。使用图标更改

. # {$ fa-css-prefix} -glass: before {content: $ fa-var-glass; }

关于混合：

 mixin icon-glass () {
    . # {$ fa-css-prefix} -glass: before {content: $ fa-var-glass; }
}

现在有了 mixinx，你只能使用图标来应用：

@include icon-glass();

您也可以禁用/包含文件

import "larger";
import "fixed-width";
import "list";
import "bordered-pulled";
import "animated";
import "rotated-flipped";

这是解决问题的最简单方法

【讨论】：

$ 和变量名之间有空格无效