SASS在Unicode内容前加上反斜杠（\）。

Question

问题

我正在尝试在编译*.scss文件后生成一些Unicode字符。

例如，我有以下内容（SCSS）：

.element:after {
    content: "\a0";
}

编译文件后，它会输出以下内容（CSS）：

.element:after {
    content: "\\a0";
}

请注意额外的不必要反斜杠(\)。

尝试的解决方案 #1

我尝试了这里的解决方案：Sass: unicode escape is not preserved in .css file，它建议引入以下函数：

@function unicode($str) {
    @return unquote("\"")+unquote(str-insert($str, "\\", 1))+unquote("\"")
}

使用它的方式如下（SCSS）:

.element:after {
    content: unicode("a0");
}

然而，这会产生以下结果（CSS）

.element:after {
    content: "\\" ")+unquote(str-insert($str, " \\\\ ", 1))+unquote(" \\ ""; 
}

注意，它甚至没有按预期调用函数。为什么会这样？

项目详情

我正在Maven中使用这些库：

<dependency>
    <groupId>net.jawr</groupId>
    <artifactId>jawr-core</artifactId>
    <version>3.9</version>
</dependency>

<dependency>
    <groupId>net.jawr.extensions</groupId>
    <artifactId>jawr-spring-extension</artifactId>
    <version>3.9</version>
</dependency>

<dependency>
    <groupId>com.darrinholst</groupId>
    <artifactId>sass-java-gems</artifactId>
    <version>3.4.20.0</version>
</dependency>

<dependency>
    <groupId>org.jruby</groupId>
    <artifactId>jruby-core</artifactId>
    <version>9.1.5.0</version>
</dependency>

<dependency>
    <groupId>org.jruby</groupId>
    <artifactId>jruby-stdlib</artifactId>
    <version>9.1.5.0</version>
</dependency>

临时解决方案

不要在SCSS中使用Unicode，而是在HTML中使用Font Awesome（将Font Awesome保留在CSS文件中）。

- Håvard Geithus

---

在sassmeister上，你的两个代码都可以正常工作：code1和code2。 - user4994625

谢谢，这个信息很有用。我本地使用JRuby运行SASS 3.4.20版本（我想是这个版本），然后通过Spring应用程序中的JAWR servlet提供该文件。因此，可能会有多个可能出现问题的地方。我将尝试查看中间阶段，看看是否能找到任何问题。 - Håvard Geithus

顺便提一下，我正在使用grunt-sass时遇到了同样的问题。问题出在Bootstrap面包屑上，其中有content: "#{$breadcrumb-separator}\00a0"和$breadcrumb-separator: "/" !default;其结果是content: "/\\00a0" :( - steve

Answer 1

当我尝试使用自定义图标字体时，遇到了同样的问题。我找到的解决方法是创建一个混合器，如下所示：

@mixin class-for-icon($name, $code) {
    .icon-#{$name}::before {
        content: unquote("\"\\#{$code}\"");
    }
}

然后我可以像这样使用它：

@include class-for-icon('myIcon', 'e1ff');

/* generates */

.icon-myIcon::before {
    content: "\e1ff";
}

我使用node-sass 4.5.3来将我的sass文件编译成css，目前在几个项目的生产环境中运行良好。希望这能帮到你！

- tonblaz