SASS adds unicode backslash (\) content

Question

Problem

I am trying to create some Unicode characters after compiling my * .scss file.

As an example, I have the following (SCSS):

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

When the file is compiled, it outputs the following (CSS):

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

Note the extra unwanted backslash (\).

Attempted Solution No. 1

I tried the solution here: Sass: the unicode escape code is not saved in the .css file , which prompts you to enter the following function:

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

And using it like this (SCSS):

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

However, this leads to the following (CSS)

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

Please note that it does not even call the function as intended. Why is this?

Project details

I use these libraries in 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> 

Temporary solution

Do not use Unicode in SCSS. Instead, use the Awesome font in HTML (saving the Awesome font in a CSS file).

Answer 1

I had the same problem when trying to use my own icon font. The solution I found creates a mixin that looks like this:

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

And then I can use it like this:

 @include class-for-icon('myIcon', 'e1ff'); /* generates */ .icon-myIcon::before { content: "\e1ff"; } 

I am using node-sass 4.5.3 to compile my sass files into css and this works well (currently it is used in several projects)

Hope this helps!