Sass引号转义异常：Font Awesome 5图标无法显示

我之前也踩过这个Sass字符串转义的坑！你遇到的问题本质是Sass在处理嵌套引号和插值时的转义逻辑叠加，导致最终输出的字符串多了不必要的转义符，让CSS的content属性无法正确识别Font Awesome的图标编码。

问题根源 #

你写的代码：

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

本意是生成带双引号的图标编码（比如"\f00c"），但Sass会把字符串里的\"当成转义后的双引号，再加上unquote的处理逻辑，最终输出变成了"\f00c\""——多出来的末尾转义符就是图标不显示的罪魁祸首。

可行的解决方案 #

这里有几种简单的修复方式，按推荐程度排序：

1. 用单引号包裹外层字符串，避免转义冲突

把外层的双引号换成单引号，这样内部的双引号不需要转义，Sass的插值逻辑会直接正确处理：

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

当$fa-var为\f00c时，这段代码会输出"\f00c"，完全符合预期。

2. 用字符串拼接替代嵌套转义

如果觉得引号嵌套容易搞混，直接用+拼接字符串更直观，还不需要额外的unquote：

@return "\"" + $fa-var + "\""

Sass会自动处理字符串拼接后的格式，最终生成的结果也是正确的带双引号的图标编码。

3. 使用Sass字符串插入函数（更清晰）

如果你的Sass版本支持str-insert函数（Dart Sass 1.23+），可以用它来给变量前后添加双引号，完全避免转义问题：

@return str-insert(str-insert($fa-var, '"', 0), '"', -1)

str-insert($fa-var, '"', 0)会在变量开头加双引号，str-insert(..., '"', -1)会在末尾加双引号，最终结果同样是"\f00c"。

调试小技巧 #

可以在代码里加@debug语句实时查看输出结果，方便验证：

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

运行Sass编译时，控制台会输出处理后的字符串，你可以确认是否是预期的"\f00c"。

另外也可以检查下你的Sass版本——Dart Sass和旧版Ruby Sass的字符串转义逻辑略有差异，如果你用的是Ruby Sass，优先选择方案1或2会更稳妥。

内容的提问来源于stack exchange，提问作者milky_jay