Sass 转义引号 - Font Awesome 5答案

【问题标题】：Sass escaping quotation marks - Font Awesome 5Sass 转义引号 - Font Awesome 5
【发布时间】：2018-05-29 04:34:59
【问题描述】：

我正在尝试使用 Sass 将 font awesome 5 集成到我的项目中。图标没有显示，但文件都正确加载，我最终发现这是因为它似乎没有正确地转义引号。

这一行

 @return unquote("\"#{ $fa-var }\"")

应该例如输出

"\f00c"

而是输出

\"\f00c\"

我已经搜索过了，这似乎是转义引号的正确方法，所以我不知道为什么它不起作用。

【问题讨论】：

【解决方案1】：

您需要将您的 sass 编译器更新到最新版本，定义您的文档编码：

@charset "utf-8";

然后只返回普通的 FOnt Awesome 变量：

@return $fa-var;

Sass 现在遵循 CSS Syntax Level 3 规范来确定样式表的编码。此外，它现在只发出 UTF-8 CSS，而不是尝试匹配源编码。

【讨论】：

我按照你的建议做了，但仍然没有显示图标。您是否建议这是 Font Awesome 5 中的一个错误作为您建议更改其代码的答案？
@milky_jay 那我不明白。返回来自字体真棒函数或自定义函数？这是一个无耻的错误。我测试了它，将 mixins 导入到我的主 sass 文件中，它以这种方式工作。你能提供你正在使用的确切的完整实现吗？
我刚刚将字体真棒文件包含到我的 sass 项目中，并使用相关类调用图标。我会尝试不同的编译器以防万一
@milky_jay unicode 是编译器问题。我使用最新版本的 node-sass。你用的是哪个编译器？
我在 coda 2 中使用了一个 sass 插件。我刚刚用 node-sass 尝试了它，它按预期工作，所以这个插件一定是问题所在。谢谢

【解决方案2】：

如上所述，最好的解决方案是更新 SASS 编译器，但对于那些无法做到这一点的人（使用 VS2013 和 Web Essentials），有一个解决方法：

@return unquote('"#{ $fa-var }"');

【讨论】：