SASS编译fontawesome保留符号表示法

Question

当我使用Sass 3.4.1将fontawesome.scss编译为CSS文件时

$fa-var-music: "\f001"; 
.#{$fa-css-prefix}-music:before { content: $fa-var-music; }

它被编译成

.fa-music:before {
  content: "";
}

由于我在项目中主要使用Win1252编码，我想知道保留CSS文件中的"\f001"的方法是什么？为什么SASS要重写它？

- Bernhard Döbler

---

\f001 代表的是 Unicode 编码点 F001（十六进制），这个编码在 Windows-1252 字符集中无效。你想要输出哪个字符？ - ljacqu

不知道为什么，但值得注意的是，当Sass这样做时，它还注入了字符集信息：@charset "UTF-8";（参见：http://sassmeister.com/gist/4c326a38bf0457f120db）。 - cimmanon

@ljacqu 我不想自己制作字符。我想要使用font awesome提供的字符。我的担心是，当文件包含Unicode字符时，一些浏览器可能无法正确地渲染fa符号。 - Bernhard Döbler

Answer 1

从 Sass 3.4.0 的 变更日志 中提取： 现在，Sass 遵循 CSS 语法 Level 3 规范来确定样式表的编码。此外，它现在仅发出 UTF-8 CSS，而不是尝试匹配源编码。

现在无法使用旧方法。

SASS 存储库上的 问题。

对我来说，回退到 SASS 3.3.14 可以解决这个问题。

- vralle

---

由于SASS在第一行正确输出了@charset "UTF-8";，只要生成的文件不与其他CSS文件合并且不是第一个文件，就不会有任何问题。 - Bernhard Döbler

我只是简单地添加了引号 $fatag: "\f02b";，这样问题就解决了。不需要回退到3.3.14版本。 - Danny Englander

我正在使用4.2.0版本。我已经在_variables文件的顶部添加了@charset "UTF-8"，但是所有的UTF/PUA字符代码已经在双引号中，但我仍然得到相同的奇怪形状。有人有更多的信息吗？ - zxbEPREF

顺便说一下，我之前使用的是旧版本的yui压缩器。它在此期间已经发生了变化。现在，@charset "UTF-8"已被拉到合并和压缩的CSS文件的顶部，因此可以被正确解析和使用。 - Bernhard Döbler

Answer 2

如果您正在使用Gulp编译CSS，您可以安装这个gulp插件，它会自动为您解决这个问题。不需要修改Sass代码。

https://www.npmjs.com/package/gulp-sass-unicode

var sass = require('gulp-sass');
var sassUnicode = require('gulp-sass-unicode');

gulp.task('sass', function(){
  gulp.src('style.scss')
    .pipe(sass())
    .pipe(sassUnicode()) // << This line is what does the magic
    .pipe(gulp.dest( "css/" ));
});

- Daniel Tonon