【问题标题】：SASS is prepending unicode content with backslash (\)SASS 在 unicode 内容前面加上反斜杠 (\)
【发布时间】：2016-11-02 08:19:51
【问题描述】：

问题

我试图在编译我的 *.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 文件中）。

【问题讨论】：

在 sassmeister 中，您的两个代码工作正常：code1 和 code2
谢谢，很高兴知道。我在 JRuby 上本地运行 SASS 版本 3.4.20（我认为），然后通过 Spring 应用程序中的 JAWR servlet 提供该文件。所以我想有很多地方可能会出错。我会尝试看看中间阶段。看看我有没有发现。
FWIW，我在使用 grunt-sass 时遇到了同样的问题。问题在于 Bootstrap 面包屑，它有 content: "#{$breadcrumb-separator}\00a0" 和 $breadcrumb-separator: "/" !default; 其结果是 content: "/\\00a0" :(

标签： java css unicode sass jruby

【解决方案1】：

我在尝试使用自定义图标字体时遇到了同样的问题。我找到的解决方案是创建一个看起来像这样的 mixin：

@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，效果很好（目前在一些项目的生产中使用它）

希望这会有所帮助！

【讨论】：