SASS добавляет к юникод-контенту обратную косую черту (\)

Question

проблема

Я пытаюсь создать некоторые символы Юникода после компиляции моего *.scss файла.

В качестве примера у меня есть следующее (SCSS):

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

Когда файл скомпилирован, он выводит следующее (CSS):

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

Обратите внимание на дополнительную нежелательную обратную косую черту (\).

Попытка решения № 1

Я попробовал решение здесь: Sass: Unicode escape не сохраняется в файле.css, который предлагает ввести следующую функцию:

@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. Вместо этого используйте Font Awesome в HTML (сохраняя Font Awesome в файле CSS).

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, и это работает хорошо (в настоящее время я использую его в работе над несколькими проектами)

Надеюсь это поможет!