如何在SASS混入中传入Unicode编号生成FontAwesome的content值？

安全阿岳

2026-5-15

解决Sass Mixin自动转换FontAwesome Unicode编号的问题

我完全理解你想简化这个FontAwesome混入的调用方式——不用每次手动写带单引号和反斜杠的Unicode字符串，直接传f078这样的编号确实方便很多。你的问题出在Sass对字符串插值和转义字符的处理逻辑上，之前的几种写法都没正确构建出有效的CSS content值。

正确的混入写法

下面这个混入会自动将传入的Unicode编号（无论带不带引号）转换成'\f078'格式的content值：

@mixin after-font-awesome($unicode, $size, $margin, $color, $weight) {
  // 确保传入的Unicode编号是字符串类型（支持带/不带引号的参数）
  $unicode-str: if(type-of($unicode) == string, $unicode, inspect($unicode));
  // 构建包含转义序列的content字符串：'\f078'
  $content-value: '\'\\'#{$unicode-str}\'';
  
  &:after {
    content: unquote($content-value);
    font-family: "FontAwesome";
    font-size: $size;
    color: $color;
    font-weight: $weight;
    margin: $margin;
    @content;
  }
}

使用示例

现在你可以直接传入纯Unicode编号，不用再手动加单引号和反斜杠了：

// 两种调用方式都生效
@include after-font-awesome(f078, 15px, 0 0 0 0.3em, orange, 900) {}
@include after-font-awesome('f078', 15px, 0 0 0 0.3em, orange, 900) {}

为什么之前的写法失败？

我们来逐一分析你尝试的几种写法问题：

写法1：content:'\#{$unicode}';
如果传入不带引号的f078，Sass会把它当成未定义的变量报错；即使传入带引号的参数，Sass在单引号字符串中对转义字符的处理不够稳定，部分版本可能无法正确解析\+插值的组合，导致编译后的content值不符合预期。
写法2：content:'\{$unicode}';
这里用了{}而非Sass的插值语法#{}, 所以$unicode不会被替换成实际值，编译后会直接输出content: '\{$unicode}';，完全无效。
写法3：content:'\$unicode';
直接将$unicode作为字符串的一部分输出，没有触发插值逻辑，编译后是content: '\$unicode';，自然无法显示正确图标。