为什么 Sass 会错误地转换 css 内容？

Question

我的 .scss 文件中有以下规则：

\n\n

.listing-price:before {\n   ...\n   content: "\xe2\x99\xa5";\n

\n\n

无论出于何种原因，运行sass --update foo.scss:foo.css --style expanded都会将其转换为：

\n\n

.listing-price:before {\n   ...\n   content: "\xce\x93\xc3\x96\xc3\x91";\n

\n\n

为什么会发生这种情况？我需要采取什么措施来防止这种情况发生？

\n

Answer 1

Sass 应该自动检测文档中的字符编码。如果不是出于某种原因，您可以使用显式将其设置为 UTF-8@charset "UTF-8";

\n

来自 SASS 文档：

\n

\n

在 Ruby 1.9 及更高版本上运行时，Sass 可以识别文档的字符编码。Sass 遵循 CSS 规范来确定样式表的编码，并回退到 Ruby 字符串编码。这意味着它首先检查 Unicode 字节顺序标记，然后检查 @charset 声明，最后检查 Ruby 字符串编码。如果这些都没有设置，它将假定文档采用 UTF-8 格式。

\n

要显式指定样式表的编码，请使用 @charset 声明，就像在 CSS 中一样。添加@charset“编码名称”；位于样式表的开头（在任何空格或注释之前），Sass 会将其解释为给定的编码。请注意，无论您使用什么编码，它都必须可转换为 Unicode。

\n

Sass 始终将其输出编码为 UTF-8。当且仅当输出文件包含非 ASCII 字符时，它将包含 @charset 声明。在压缩模式下，使用 UTF-8 字节顺序标记代替 @charset 声明。

\n

\n

@charset "UTF-8";\n.listing-price:before {\n    content: "\xe2\x99\xa5";\n}\n

\n

演示：

\n

https://www.sassmeister.com/gist/6326e75075795d1c265d26467c06518c

\n

文件：

\n

http://sass-lang.com/documentation/file.SASS_REFERENCE.html

\n